轮播

好几天木有写博客了,木有网啊我们这个地方,只能凑点网写今天我们写一下轮播把

思路1:获取节点

　　获取左右箭头

　　打印图片中的class

　　打印数字里面的class

　　图片轮播,在这之前设置一个全局变量m

　　找到图片节点,两个值不一样,前一个是要隐藏的后一个是要显示的

　　给div添加移入移出事件

　　移入左右箭头显示

　　移除隐藏

　　给每个数字一个点击事件

　　左右箭头添加点击事件实现图片切换

下面我们来看代码

html代码

 1 <div id="lun">
 2         <ul>
 3             <li class="active"><img src="./imgs/1.jpg" alt=""></li>
 4             <li><img src="./imgs/2.jpg" alt=""></li>
 5             <li><img src="./imgs/3.jpg" alt=""></li>
 6             <li><img src="./imgs/4.jpg" alt=""></li>
 7             <li><img src="./imgs/5.jpg" alt=""></li>
 8             <li><img src="./imgs/6.jpg" alt=""></li>
 9         </ul>
10         <div id="num_list">
11             <ul>
12                 <li><span class="active_num">1</span></li>
13                 <li><span >2</span></li>
14                 <li><span>3</span></li>
15                 <li><span>4</span></li>
16                 <li><span>5</span></li>
17                 <li><span>6</span></li>
18             </ul>
19         </div>
20 
21         <!-- 向左的箭头 -->
22         <div id="left">&lt;</div>
23         <!-- 向右的箭头 -->
24         <div id="right">&gt;</div>
25     </div>

css代码

 1     <style>
 2         *{margin:0px;padding:0px;list-style:none;}
 3         #lun{width:730px;height:454px;margin:0 auto;margin-top:20px;position:relative;}
 4         #lun>ul>li{display: none;}
 5         #lun ul .active{display: block;}
 6         #lun #num_list{width:100%;height:30px;position:absolute;bottom:0px;opacity: 0.5}
 7         #lun #num_list ul{margin-left:290px;}
 8         #lun #num_list li{float:left;height:30px;line-height:30px;}
 9         #lun #num_list li span{width:20px;height:20px;color:white;text-align:center;line-height:20px;border-radius: 50%;display: block;background: black;margin-top:5px;margin-right: 5px}
10         #lun #num_list li .active_num{background:#c81623;}
11         #left,#right{width:26px;height:68px;background: black;color:white;text-align:center;font-size:60px;line-height:68px;opacity: 0.3;position: absolute;display:none;}
12         #left{top:193px;}
13         #right{top:193px;right:0px;}
14     </style>

js代码

  1 var lun=document.getElementById("lun");
  2 var list=lun.children[0].children;
  3 var numlist=document.getElementById("num_list").children[0].children;
  4 //获取左右箭头
  5 var left = document.getElementById('left');
  6         var right = document.getElementById('right');
  7 
  8         //打印的是图片中的class
  9         // console.log(list[0]);
 10         // //打印数字中的class
 11         // console.log(numlist[0].firstElementChild);
 12         var time = null;
 13         var m=0;//这里的m非常重要后面都会用到 全局变量 
 14         //1 图片轮播
 15         function autoRun(){
 16             time = setInterval(function (){
 17                 // console.log(list[m]);
 18                 // 两个m值不一样 前一个是要被隐藏的 后一个是要被显示
 19                 // console.log("************");
 20                 // console.log(m);
 21                 
 22                 list[m].removeAttribute("class");
 23                 numlist[m].firstElementChild.removeAttribute("class");
 24                 m++;
 25                 if(m>5){
 26                     m=0;
 27                 }
 28 
 29                 // console.log(m);
 30                 // console.log("************");
 31 
 32                 list[m].className = "active";
 33                 numlist[m].firstElementChild.className = "active_num";
 34             },1000);
 35         }
 36 
 37         //使用函数autoRun();
 38         autoRun();
 39 
 40         //2 div盒子添加移入移出事件
 41         lun.onmouseover = function (){
 42             clearInterval(time);
 43             left.style.display = "block";
 44             right.style.display = "block";
 45             this.style.cursor = "pointer";
 46         }
 47 
 48         lun.onmouseout = function (){
 49             autoRun();    
 50             left.style.display = "none";
 51             right.style.display = "none";
 52             this.style.cursor = "default";
 53         }
 54 
 55         //3 给每个数字点击事件
 56         for(var i=0;i<numlist.length;i++){
 57             numlist[i].onclick = function(){
 58                 // alert(123);
 59 
 60                 //轮播的m值消失,点击的m值显示
 61                 // 第一个m是在轮播的值 
 62                 list[m].removeAttribute("class");
 63                 numlist[m].firstElementChild.removeAttribute("class");
 64                 // console.log("===========");
 65                 // console.log(m);
 66 
 67                 //第二个m是我点击的值 
 68                 m = this.firstElementChild.innerHTML-1;
 69                 list[m].className = "active";
 70                 numlist[m].firstElementChild.className = "active_num";
 71 
 72                 // console.log(m);
 73                 // console.log("===========");
 74                 
 75                 // this.firstElementChild.className = "active_num";
 76             }
 77         }
 78 
 79         //4 左右箭头添加点击事件
 80         left.onclick = function(){
 81             list[m].removeAttribute("class");
 82             numlist[m].firstElementChild.removeAttribute("class");
 83 
 84             m--;
 85             if(m<0){
 86                 m=5;
 87             }
 88             list[m].className = "active";
 89             numlist[m].firstElementChild.className = "active_num";
 90 
 91         }
 92         
 93         right.onclick = function(){
 94             list[m].removeAttribute("class");
 95             numlist[m].firstElementChild.removeAttribute("class");
 96 
 97             m++;
 98             if(m>5){
 99                 m=0;
100             }
101             list[m].className = "active";
102             numlist[m].firstElementChild.className = "active_num";
103 
104         }