<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slide - by ghostwu</title> <link href="https://www.jb51.net/css/slide3.css" > <script src="https://www.jb51.net/js/animate.js"></script> <script src="https://www.jb51.net/js/slide.js"></script> </head> <body> <div> <div> <div> <img src="https://www.jb51.net/article/img/1.jpg" alt=""> <img src="https://www.jb51.net/article/img/2.jpg" alt=""> <img src="https://www.jb51.net/article/img/3.jpg" alt=""> <img src="https://www.jb51.net/article/img/4.jpg" alt=""> <img src="https://www.jb51.net/article/img/5.jpg" alt=""> </div> </div> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html>
slide3.css文件：
* { margin: 0; padding: 0; } li { list-style-type: none; } #slide { width: 800px; height: 450px; position: relative; margin:20px auto; } #slide-img { position: relative; width: 800px; height: 450px; overflow: hidden; } #img-container { position: absolute; left: 0px; top: 0px; height: 2250px; /*font-size:0px;*/ } #img-container img { display: block; float: left; } #slide-nums { position: absolute; right:10px; bottom:10px; } #slide-nums li { float: left; margin:0px 10px; background: white; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius:10px; text-indent:-999px; opacity:0.6; filter:alpha(opacity:60); cursor:pointer; } #slide-nums li.active { background: red; }
animate.js文件:
function css(obj, attr, value) { if (arguments.length == 3) { obj.style[attr] = value; } else { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } } function animate(obj, attr, fn) { clearInterval(obj.timer); var cur = 0; var target = 0; var speed = 0; obj.timer = setInterval(function () { var bFlag = true; for (var key in attr) { if (key == 'opacity ') { cur = css(obj, 'opacity') * 100; } else { cur = parseInt(css(obj, key)); } target = attr[key]; speed = ( target - cur ) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (cur != target) { bFlag = false; if (key == 'opacity') { obj.style.opacity = ( cur + speed ) / 100; obj.style.filter = "alpha(opacity:" + ( cur + speed ) + ")"; } else { obj.style[key] = cur + speed + "px"; } } } if (bFlag) { clearInterval(obj.timer); fn && fn.call(obj); } }, 30 ); }
slide.js文件：
window.onload = function () { function Slide() { this.oImgContainer = document.getElementById("img-container"); this.aLi = document.getElementsByTagName("li"); this.index = 0; } Slide.prototype.bind = function () { var that = this; for (var i = 0; i < this.aLi.length; i++) { this.aLi[i].index = i; this.aLi[i].onmouseover = function () { that.moveTop( this.index ); } } } Slide.prototype.moveTop = function (i) { this.index = i; for( var j = 0; j < this.aLi.length; j++ ){ this.aLi[j].className = ''; } this.aLi[this.index].className = 'active'; animate( this.oImgContainer, { "top" : -this.index * 450, "left" : 0 }); } var oSlide = new Slide(); oSlide.bind(); }
左右幻灯片只需要改下样式即可
样式文件：
* { margin: 0; padding: 0; } li { list-style-type: none; } #slide { width: 800px; height: 450px; position: relative; margin:20px auto; } #slide-img { position: relative; width: 800px; height: 450px; overflow: hidden; } #img-container { position: absolute; left: 0px; top: 0px; width: 4000px; } #img-container img { display: block; float: left; } #slide-nums { position: absolute; right:10px; bottom:10px; } #slide-nums li { float: left; margin:0px 10px; background: white; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius:10px; text-indent:-999px; opacity:0.6; filter:alpha(opacity:60); cursor:pointer; } #slide-nums li.active { background: red; }
js调用文件：