第65天：仿网易轮播图

Posted 2020-10-12 半指温柔乐

仿网易轮播图

 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             }else if(this.className=="slider-next"){//右侧按钮开始
41                 //点击右侧按钮时，当前走到左边，下张快速走到右侧，然后再到中间
42                 animate(imgs[iNow],{left:-scrollWidth});//当前图片慢慢走到-scrollWidth位置
43                 ++iNow>imgs.length-1?iNow=0:iNow;//先加加再判断后执行
44                 imgs[iNow].style.left=scrollWidth+"px";//快速走到右侧
45                 animate(imgs[iNow],{left:0});//下一张走到left:0的位置
46 
47             }else{
48                 
49             }
50         }
51     }
52 
53 
54 
55 
56 
57 
58 
59 }