js原生轮播
今天用js做了轮播图，做的不怎么好，希望大家能够看懂。
效果：
1.鼠标放在轮播图上自动停止
2.鼠标离开轮播图自动播放
3.鼠标点击轮播图上的小圆点跳转到相应的图上。
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js轮播</title> 6 <style type="text/css" media="screen"> 7 *{margin: 0;padding: 0;} 8 body{width: 100%} 9 ul{width: 100%;height: 500px;list-style: none;position: relative;overflow: hidden} 10 ul li {float: left;width: 100%;height: 100%;position: absolute;top: 0;left: 0;text-align: center;line-height: 500px;font-size: 40px;font-weight: bold;background: red;z-index: 0;opacity: 0} 11 ul li:nth-child(2){background: yellow} 12 ul li:nth-child(3){background: pink} 13 .anbox{position: absolute;z-index: 999;left: 50%;top: 90%;transform: translate(-50%, 0);} 14 .an{width: 20px;height: 20px;background: white;float: left;margin-left: 20px;border-radius: 50%;opacity: 0.6} 15 .an:nth-child(1){margin: 0;} 16 </style> 17 </head> 18 <body> 19 <ul> 20 <li>1</li> 21 <li>2</li> 22 <li>3</li> 23 <div class="anbox"> 24 <div class="an"></div> 25 <div class="an"></div> 26 <div class="an"></div> 27 </div> 28 </ul> 29 <script src="js/c.js"></script> 30 <script> 31 $tag('body')[0].onload = aa; 32 var yuans = $class('an'); 33 var lis = $tag('li'); 34 var ul = $tag('ul')[0]; 35 var b = 1;//控制图片和小圆点的下标值; 36 37 // 轮播 38 function aa(){ 39 reset(); 40 lis[b-1].style.zIndex = b; 41 lis[b-1].style.transition = 1+'s'; 42 lis[b-1].style.opacity = 1; 43 yuans[b-1].style.background = $random255(); 44 yuans[b-1].style.opacity = 1; 45 b++; 46 if(b==lis.length+1){//重置b值 47 b=1; 48 } 49 } 50 // 鼠标放上去 51 var time =setInterval(aa,2000); 52 ul.onmousemove = ting; 53 function ting(){ 54 clearInterval(time); 55 } 56 ul.onmouseout = function(){ 57 ting = null; 58 time =setInterval(aa,2000); 59 } 60 61 //鼠标放在小圆点的时候 62 for(var x=0;x<yuans.length;x++){ 63 yuans[x].onclick = yuan; 64 yuans[x].value = x; 65 } 66 function yuan(){ 67 var i = this.value; 68 reset(); 69 lis[i].style.zIndex =4; 70 lis[i].style.opacity = 1; 71 yuans[i].style.background = $random255(); 72 } 73 74 //点击上一个或者下一个 75 var page = $class('tag'); 76 for(var x of page){ 77 x.onclick = pages; 78 } 79 function pages(){ 80 if(this.id == 'left'){ 81 font(); 82 } 83 } 84 function reset(){ //小圆点和图全部还原 85 for(var j=0;j<lis.length;j++){ 86 lis[j].style.zIndex = 0; 87 lis[j].style.opacity = 0; 88 yuans[j].style.background = "white"; 89 yuans[j].style.opacity = 0.6; 90 } 91 } 92 </script> 93 </body> 94 </html>
轮播就到这里了，里面还有自己封装的函数，就使用了标签，类名，id获取。