<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta keyword="左右轮播图-效果比较好"> <title>Document</title> <link type="text/css" href="https://www.jb51.net/css/css.css"> <script type="text/javascript" src="https://www.jb51.net/js/animate.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/slider.js"></script> </head> <body> <div> <div> <div> <div><a href="#"><img src="https://www.jb51.net/images/1.jpg" alt=""></a></div> <div><a href="#"><img src="https://www.jb51.net/images/2.jpg" alt=""></a></div> <div><a href="#"><img src="https://www.jb51.net/images/3.jpg" alt=""></a></div> <div><a href="#"><img src="https://www.jb51.net/images/4.jpg" alt=""></a></div> <div><a href="#"><img src="https://www.jb51.net/images/5.jpg" alt=""></a></div> <div><a href="#"><img src="https://www.jb51.net/images/6.jpg" alt=""></a></div> </div> </div> <div> <span></span> <!-- <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> --> <span></span> </div> </div> <script> </script> </body> </html>
主要css代码：
.w-slider{ width: 310px; height: 265px; background-color: pink; margin: 100px auto; position: relative; overflow: hidden; } .slider{ width: 310px; height: 220px; } .slider-main{ width: 620px; /* 两个图片的宽度 */ height: 310px; } .slider-main img{ vertical-align: top; /* 消除图片上下3px的间隙 */ } .slider-main-img{ position: absolute; top: 0; left: 0; } .slider-ctrl{ text-align:center; padding-top: 8px; } .slider-ctrl-con{ display: inline-block; width: 24px; height: 20px; background-color: blue; margin: 0 5px; background: url(../images/icon.png) no-repeat -24px -782px; cursor: pointer; text-indent: -20em; /* 为了将span的标号隐藏掉 */ overflow: hidden; } .slider-ctrl .current{ background-position: -24px -762px; } .slider-ctrl-prev,.slider-ctrl-next{ position: absolute; top: 50%; margin-top: -35px; display: inline-block; width: 30px; height: 35px; background: url(../images/icon.png) no-repeat 6px top; opacity: 0.8; cursor: pointer; } .slider-ctrl-prev{ left: 0; } .slider-ctrl-next{ right: 0; background-position: -6px -44px; }
主要js代码（slider.js）：
window.onload = function(){ function $(id){ return document.getElementById(id);} var js_slider = $("js_slider"); var slider_main = $("slider_main"); //获取轮播图片的父盒子 var imgs = slider_main.children; //得到图片组 var slider_ctrl = $("slider_ctrl"); //获取控制的 父盒子 //生成控制轮播的span for(var i = 0; i< imgs.length; i++){ var span = document.createElement("span"); span.className = "slider-ctrl-con"; span.innerHTML = imgs.length - i; slider_ctrl.insertBefore(span,slider_ctrl.children[1]); } var spans = slider_ctrl.children; spans[1].setAttribute("class","slider-ctrl-con current"); //设置第一个span增加current样式 //布局图片，第一张在正确位置，其余的在右边 var scrollWidth = js_slider.clientWidth; //获取大盒子的宽度，也就是后面动画走的距离 for(var i=1; i<imgs.length; i++){ //第一张图片在正确位置 imgs[i].style.left = scrollWidth + "px"; //其余图片在310px的位置 } //遍历三个按钮--左、右和下面的span var iNow = 0; //设置当前显示的图片的索引号 for(var k in spans){ //k是索引号 spans[k].onclick = function(){ if(this.className == "slider-ctrl-prev"){ //当前图片右移（从0 -> 310px） animate(imgs[iNow],{left: scrollWidth}); iNow = --iNow < 0 ? imgs.length-1 : iNow; imgs[iNow].style.left = -scrollWidth + "px";//快速执行，即将显示的一页立马走到左边，然后显示 animate(imgs[iNow],{left:0}); //下一张图片右移，从-310px->0 setSquare(); }else if(this.className == "slider-ctrl-next"){ //当前图片左移（从0 -> -310px） animate(imgs[iNow],{left: -scrollWidth}); iNow = (++iNow) % imgs.length; imgs[iNow].style.left = scrollWidth + "px";//快速执行，即将显示的一页立马走到右边，然后左移显示 animate(imgs[iNow],{left:0}); //下一张图片左移，从310px->0 setSquare(); //或者精简为函数 /*autoPlay();*/ }else{ /*alert("点击了下面的span");*/ var clickIndex = this.innerHTML - 1; if(clickIndex > iNow){ //做法等同于右侧按钮 animate(imgs[iNow],{left: -scrollWidth}); imgs[clickIndex].style.left = scrollWidth + "px";//快速执行，即将显示的一页立马走到右边，然后左移显示 }else if(clickIndex < iNow){ //做法等同于左侧 animate(imgs[iNow],{left: scrollWidth}); imgs[clickIndex].style.left = -scrollWidth + "px";//快速执行，即将显示的一页立马走到左边，然后显示 } iNow = clickIndex; animate(imgs[iNow],{left:0}); setSquare(); } } } //控制span小方块的样式 函数 function setSquare(){ //下面的span样式清空，将iNow设置为current，注意是下面的span，不包含左右控制按钮 for(var i=1; i<spans.length-1; i++){ spans[i].className = "slider-ctrl-con"; } spans[iNow+1].className = "slider-ctrl-con current"; //注意iNow是索引号，要加1 } //设置定时器 ，和右侧按钮功能一致 var timer =null; timer = setInterval(autoPlay,2000); function autoPlay(){ animate(imgs[iNow],{left: -scrollWidth}); iNow = (++iNow) % imgs.length; imgs[iNow].style.left = scrollWidth + "px";//快速执行，即将显示的一页立马走到右边，然后左移显示 animate(imgs[iNow],{left:0}); //下一张图片左移，从310px->0 setSquare(); } //清除定时器 js_slider.onmouseover = function(){ clearInterval(timer); } //开启定时器 js_slider.onmouseout = function(){ clearInterval(timer); //要执行定时器，先清除定时器 timer = setInterval(autoPlay,2000); } }
缓动动画js代码：（animate.js）