图片加载有点慢 等一下 http://codepen.io/EvyatarDa/pen/bZLdBA <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* General */ @import url(https://fonts.googleapis.com/css?family=Raleway:400,700); body { margin: 0; } .header, .footer { background: #444; margin: 0px; color: rgb(255, 255, 255); font-family: Raleway; text-align: center; padding: 80px; } .header h1 { margin: 0px; padding: 0px; } .header span, .footer span { color: #AAA; } .ESlider { margin: 0 auto !important; box-shadow: none !important; width: 100% !important; } /* Name: ESlider v1.0 Author: Evyatar Daud */ .ESlider { width: 800px; max-width: 100%; margin: 10px auto; background: transparent; box-shadow: 0px 0px 5px 1px #AAA; overflow: hidden; position: relative; transition: 0.2s all; } .ESlider .ESlider-slide { position: absolute; left: 0; transform: scale(1.1); top: 0; width: 100%; height: auto; display: inline-block; opacity: 0; transition: 0.5s all; } .ESlider .ESlider-active-slide { opacity: 1; left: 0; transform: scale(1); } .ESlider .ESlider-bulks-container { position: absolute; bottom: -30px; opacity: 0; transition: 0.3s all ease-out; width: 100%; text-align: center; } .ESlider:hover .ESlider-bulks-container { opacity: 1; bottom: 10px; } .ESlider .ESlider-bulk { display: inline-block; height: 10px; width: 10px; background: transparent; border: 1px solid #FFF; box-shadow: 0px 0px 1px 1px #777, 0px 0px 1px 1px #777 inset; position: relative; margin: 5px; border-radius: 50%; cursor: pointer; transition: 0.5s all ease-out; } .ESlider .ESlider-bulk:hover, .ESlider .ESlider-active-bulk { background: #FFF !important; box-shadow: 0px 0px 1px 1px #777 !important; } .ESlider .ESlider-bulk .ESlider-thumbnail { visibility: hidden; opacity: 0; position: absolute; transform: translateX(-50%); left: 50%; bottom: 100%; height: 50px; border: 2px solid #FFF; box-shadow: 0px 0px 2px 1px #777; transition: 0.3s all; } .ESlider .ESlider-bulk:after { content: ''; display: block; position: absolute; visibility: hidden; opacity: 0; bottom: 100%; height: 0; width: 0; border: 5px solid transparent; border-top-color: #FFF; margin-bottom: -10px; transition: 0.3s all; } .ESlider .ESlider-bulk:hover .ESlider-thumbnail, .ESlider .ESlider-bulk:hover:after { visibility: visible; opacity: 1; margin-bottom: 10px; } .ESlider .ESlider-bulk:hover:after { margin-bottom: 0; } .ESlider .ESlider-previous, .ESlider .ESlider-next { position: absolute; top: 0; height: 100%; width: 10%; background: rgba(0,0,0,0.1); transition: 0.3s all; } .ESlider .ESlider-previous:before, .ESlider .ESlider-previous:after, .ESlider .ESlider-next:before, .ESlider .ESlider-next:after { content: ''; display: block; position: absolute; height: 20px; width: 2px; background: #FFF; top: 50%; margin-top: -10px; } .ESlider .ESlider-previous:before { transform: rotate(45deg) translateY(-50%); } .ESlider .ESlider-previous:after { transform: rotate(-45deg) translateY(50%); } .ESlider .ESlider-next:before { transform: rotate(-45deg) translateY(-50%); } .ESlider .ESlider-next:after { transform: rotate(45deg) translateY(50%); } .ESlider .ESlider-previous:before, .ESlider .ESlider-previous:after { left: 50%; margin-left: -10px; } .ESlider .ESlider-next:before, .ESlider .ESlider-next:after { right: 50%; margin-right: -10px; } .ESlider .ESlider-previous:hover, .ESlider .ESlider-next:hover { background: rgba(0,0,0,0.3); } .ESlider .ESlider-previous { left: -10%; } .ESlider .ESlider-next { right: -10%; } .ESlider:hover .ESlider-previous { left: 0; } .ESlider:hover .ESlider-next { right: 0; } </style> </head> <body> <div class="header"> <h1> ESlider - v1.0 </h1> <span> Just another awesome slider </span> </div> <div id="slider-1"></div> <div class="footer"> <span> EvyatarDaud 2016 © All rights reserved </span> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> window.onload = function() { var slider = new ESlider("#slider-1", [ "http://www.planwallpaper.com/static/images/beach-cool-wallpaper-hd_1.jpg", "https://static.pexels.com/photos/9574/pexels-photo.jpeg", "http://www.hd-wallpapersdownload.com/script/bulk-upload/download-hd-wallpapers-hd-for-mobile-3D.jpg", "http://allpicts.in/wp-content/uploads/2015/02/3d-nature-wallpaper-landscape-photo-of-mountaint.jpg", "http://www.ultrahdwallpapers.net/images/6.jpg", "https://4.bp.blogspot.com/-jS9AKEwPeHQ/UxeSbPDXWjI/AAAAAAAApWM/-emBFoRWuwU/s0/Aston+Martin+Supercars_Ultra+HD.jpg", "http://hdfreewallpaper.net/wp-content/uploads/2016/03/stain-glass-window-free-hd-wallpapers.jpg" ]); } /* Name: ESlider v1.0 Author: Evyatar Daud */ var ESlider = function(slider, images) { /* Function: Get Element by Selector */ var _ = function(selector) { return document.querySelector(selector); } /* Function: Get All Elements by Selector */ var __ = function(selector) { return document.querySelectorAll(selector); } /* Declare class variables */ this.slider = _(slider); this.images = images; this.slides = ""; this.currentSlide; /* Add ESlider class to the slider */ this.slider.classList.add("ESlider"); /* Create slides */ this.slides = ""; this.bulks = "<div class='ESlider-bulks-container'>"; this.images.forEach(function(image, index) { this.slides += "<img class='ESlider-slide ESlider-slide-" + (index + 1) + "' src='" + image + "' />"; this.bulks += "<span class='ESlider-bulk' data-slide-id='"+ (index+1) + "'><img src='" + image + "' class='ESlider-thumbnail' /></span>"; }.bind(this)); /* Set slides */ this.bulks += "</div>"; this.contronls = "<span class='ESlider-previous'></span><span class='ESlider-next'></span>"; this.slider.innerHTML += this.slides + this.bulks + this.contronls; /* Function: Set Slider Auto Sliding */ this.interval = function() { this.autoSlide = setInterval(function() { this.next(); }.bind(this), 5000); }.bind(this); /* Function: Change Slide */ this.setSlide = function(id) { clearInterval(this.autoSlide); /* hide current slide */ if (_(slider + " .ESlider-active-slide") != null) _(slider + " .ESlider-active-slide").classList.remove("ESlider-active-slide"); /* reset active bulk */ if (_(slider + " .ESlider-active-bulk") != null) _(slider + " .ESlider-active-bulk").classList.remove("ESlider-active-bulk"); /* show new slide */ _(slider + " .ESlider-slide-" + id).classList.add("ESlider-active-slide"); _(slider + " .ESlider-bulk[data-slide-id='" + id + "']").classList.add("ESlider-active-bulk"); _(slider).style.height = _(slider + " .ESlider-slide-" + id).clientHeight + "px"; this.currentSlide = id; this.interval(); } /* Function: Next Slide */ this.next = function() { if (this.currentSlide == this.images.length) this.currentSlide = 1; else this.currentSlide++; this.setSlide(this.currentSlide); } /* Function: Previous Slide */ this.previous = function() { if (this.currentSlide == 1) this.currentSlide = this.images.length; else this.currentSlide--; this.setSlide(this.currentSlide); } /* Set Bulks event listeners */ var bulks = __(slider + " .ESlider-bulk"); for (var i = 0; i < bulks.length; i++) { bulks[i].addEventListener("click", function(e) { var slideID = e.target.dataset.slideId; this.setSlide(slideID); }.bind(this)); } _(slider + " .ESlider-previous").addEventListener("click", function(e) { this.previous(); }.bind(this)); _(slider + " .ESlider-next").addEventListener("click", function(e) { this.next(); }.bind(this)); /* Set First Slide */ this.setSlide(1); } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 全屏轮播 喜欢 (0)or分享 (0)
