仿网易轮播图
1、HTML部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>仿网易轮播图</title> 6 <link rel="stylesheet" href="css/css.css"> 7 <script src="js/slider.js" type="text/javascript"></script> 8 <script src="js/animate.js" type="text/javascript"></script> 9 </head> 10 <body> 11 <div class="w-slider" id="js_slider"> 12 <div class="slider" > 13 <div class="slider-main" id="slider_main_block"> 14 <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div> 15 <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div> 16 <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div> 17 <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div> 18 <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div> 19 <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div> 20 </div> 21 </div> 22 <div class="slider-ctrl" id="slider_ctrl"> 23 <span class="slider-prev"></span> 24 <span class="slider-next"></span> 25 </div> 26 </div> 27 </body> 28 </html>
2、CSS部分
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 .w-slider{ 6 width: 310px; 7 height: 265px; 8 margin:100px auto; 9 background-color: red; 10 position: relative; 11 overflow: hidden; 12 } 13 .slider{ 14 width: 310px; 15 height: 220px; 16 background-color: yellow; 17 } 18 .slider-main{ 19 width: 620px; 20 height: 220px; 21 22 } 23 .slider-main-img{ 24 position: absolute; 25 top:0; 26 left:0; 27 } 28 29 .slider-ctrl{ 30 text-align: center; 31 padding-top: 5px; 32 } 33 .slider-con{ 34 width: 24px; 35 height: 20px; 36 display: inline-block; 37 background-color: blue; 38 background: url(../images/icon.png) no-repeat -24px -782px; 39 margin:0 5px; 40 cursor: pointer; 41 text-indent: -20em; 42 overflow: hidden; 43 } 44 .current{ 45 background-position: -24px -762px; 46 } 47 .slider-prev,.slider-next{ 48 position: absolute; 49 top:50%; 50 margin-top: -35px; 51 background: url(../images/icon.png) no-repeat 6px top; 52 width: 30px; 53 height: 35px; 54 opacity:0.8; 55 cursor: pointer; 56 } 57 .slider-prev{ 58 left:0; 59 } 60 .slider-next{ 61 right:0; 62 background-position: -6px -44px; 63 }
3、js部分
1 /** 2 * Created by Administrator on 2017/10/25. 3 */ 4 window.onload=function(){ 5 //获取元素 6 function $(id) { 7 return document.getElementById(id); 8 } 9 var js_slider = $("js_slider");//获取最大盒子 10 var slider_main_block = $("slider_main_block");///图片的父亲 11 var imgs = slider_main_block.children;//获得所有的图片组 12 var slider_ctrl=$("slider_ctrl");//获得控制的父盒子 13 14 //操作元素 15 for(var i=0;i<imgs.length;i++){ 16 var span=document.createElement("span");//创建span 17 span.className="slider-con";//添加类名 18 span.innerHTML=imgs.length-i;//实现倒叙插入 19 slider_ctrl.insertBefore(span,slider_ctrl.children[1]);//在父亲倒数二个孩子前插入 20 21 } 22 var spans=slider_ctrl.children; 23 spans[1].setAttribute("class","slider-con current");//两个类名 24 25 var scrollWidth=js_slider.clientWidth;//得到大盒子宽度 动画移动的距离 26 for(var i=1;i<imgs.length;i++){//除了当前的，从1开始 27 imgs[i].style.left=scrollWidth+"px";//除了当前，其他的走到scrollWidth位置 28 } 29 30 //三个按钮动画开始 31 var iNow=0;//控制播放张数 32 for(var k in spans){//遍历三个按钮 33 spans[k].onclick=function(){ 34 if(this.className=="slider-prev"){ 35 //点击左侧按钮时，当前走到右边，下张快速走到左侧，然后再到中间 36 animate(imgs[iNow],{left:scrollWidth});//当前图片慢慢走到scrollWidth位置 37 --iNow<0?iNow=imgs.length-1:iNow;//先加加再判断后执行 38 imgs[iNow].style.left=-scrollWidth+"px";//快速走到左侧 39 animate(imgs[iNow],{left:0});//下一张走到left:0的位置 40 setSquare(); 41 }else if(this.className=="slider-next"){//右侧按钮开始 42 //点击右侧按钮时，当前走到左边，下张快速走到右侧，然后再到中间 43 animate(imgs[iNow],{left:-scrollWidth});//当前图片慢慢走到-scrollWidth位置 44 ++iNow>imgs.length-1?iNow=0:iNow;//先加加再判断后执行 45 imgs[iNow].style.left=scrollWidth+"px";//快速走到右侧 46 animate(imgs[iNow],{left:0});//下一张走到left:0的位置 47 setSquare(); 48 49 }else{ 50 //小span点开始 51 var that=this.innerHTML-1; 52 if(that>iNow){//相当于右侧按钮 53 animate(imgs[iNow],{left:-scrollWidth});//当前的走到左边 54 imgs[that].style.left=scrollWidth+"px";//点击的走到右边 55 }else if(that<iNow){//相当于左侧按钮 56 animate(imgs[iNow],{left:scrollWidth});//当前的走到右边 57 imgs[that].style.left=-scrollWidth+"px";//点击的走到左边 58 59 } 60 iNow=that;//点击的给当前 61 animate(imgs[iNow],{left:0});//点击的走到中间 62 setSquare();//调用函数 63 } 64 } 65 66 //控制播放按钮的的函数 67 function setSquare(){ 68 for(var i=1;i<spans.length-1;i++){//只遍历1-6的span 69 spans[i].className="slider-con";//清除所有的current 70 } 71 spans[iNow+1].className="slider-con current";//当前的 从1开始 72 } 73 74 } 75 76 }
运行效果：
