JavaScript实现轮播图效果
我又来了，同志们。老想你们了
捕获小可爱一枚。
下面进入正题：用JavaScript原生代码写轮播图效果。
具体效果就不多说了，网站上面的轮播效果我们都知晓。下面是展示代码
html代码：
1 <div class="main"> 2 <ul> 3 <li style="display: block;"> <img src="img/a1 (1).jpg" /></li> 4 <li> <img src="img/a1 (2).jpg" /> </li> 5 <li> <img src="img/a1 (3).jpg" /> </li> 6 <li> <img src="img/a1 (4).jpg" /> </li> 7 <li> <img src="img/a1 (5).jpg" /> </li> 8 </ul> 9 <div class="ctrl"> 10 <span><</span> 11 <span>></span> 12 </div> 13 <div class="ditto"> 14 <p class="active">1</p> 15 <p>2</p> 16 <p>3</p> 17 <p>4</p> 18 <p>5</p> 19 </div> 20 21 </div>
css代码：
1 * { 2 padding: 0; 3 margin: 0; 4 } 5 6 .main { 7 height: 400px; 8 width: 600px; 9 margin: 0 auto; 10 position: relative; 11 } 12 13 .main ul li { 14 height: 400px; 15 width: 600px; 16 list-style: none; 17 position: absolute; 18 display: none; 19 } 20 21 .main ul li img { 22 height: 400px; 23 width: 600px; 24 cursor: pointer; 25 } 26 27 .ctrl { 28 height: 40px; 29 width: 100%; 30 position: absolute; 31 bottom: 50%; 32 text-align: center; 33 } 34 35 .ctrl span { 36 width: 40px; 37 height: 40px; 38 border-radius: 100%; 39 line-height: 40px; 40 font-size: 32px; 41 color: #ffffff; 42 background-color: rgba(0, 0, 0, 0.2); 43 cursor: pointer; 44 } 45 46 .ctrl span:nth-child(1) { 47 float: left; 48 } 49 50 .ctrl span:nth-child(2) { 51 float: right; 52 } 53 54 .ditto { 55 position: absolute; 56 width: 200px; 57 height: 20px; 58 bottom: 30px; 59 left: 38%; 60 } 61 62 .ditto p { 63 height: 20px; 64 width: 20px; 65 line-height: 20px; 66 background: #efefef; 67 text-align: center; 68 width: 20px; 69 height: 20px; 70 float: left; 71 border-radius: 100%; 72 margin-left: 10px; 73 cursor: pointer; 74 } 75 76 .ditto .active { 77 background: #ff9000; 78 box-shadow: 0 0 10px #FF9000; 79 }
js代码：
1 <script type="text/javascript"> 2 //获取节点 3 var box_v = document.querySelector('.main'); 4 var li_v = document.querySelectorAll('.main ul li'); 5 var p_v = document.querySelectorAll('.ditto>p'); 6 var ctrl_v = document.querySelectorAll('.ctrl>span'); 7 console.log(li_v); 8 //声明全局变量 9 var current = 0; 10 var timer = null; 11 var pre = null; 12 var nex = null; 13 //开启自动循环轮播,封装函数move 14 function move() { 15 //首先清除当前current以外的li_v的样式显示和伪圆标p_v的效果, 以下的同上 16 for (let i = 0; i < li_v.length; i++) { 17 li_v[i].style.display = "none"; 18 p_v[i].className = ""; 19 } 20 //鼠标移入的时候获取当前的索引,也就是变量current 21 current = (current + 1) % li_v.length; 22 console.log(current); 23 24 //然后一个一个实现轮播和图标效果 25 li_v[current].style.display = "block"; 26 p_v[current].className = "active"; 27 }; 28 timer = setInterval(move, 1500); 29 30 for (let i = 0; i < li_v.length; i++) { 31 //鼠标划入图片区域时清除定时器,暂停于当前页面 32 li_v[i].onmouseover = function() { 33 clearInterval(timer); 34 } 35 //鼠标移出图片区域时继续向下轮播 36 li_v[i].onmouseout = function() { 37 timer = setInterval(move, 1500); 38 } 39 } 40 // 当鼠标放在小圆标的时候清除定时器,暂停于当前图片页面和圆标实现效果 41 for (var i = 0; i < p_v.length; i++) { 42 p_v[i].index = i; 43 p_v[i].onmouseover = function() { 44 clearInterval(timer); 45 for (var i = 0; i < li_v.length; i++) { 46 p_v[i].className = ""; 47 li_v[i].style.display = "none"; 48 } 49 this.className = "active"; 50 // console.log(this.index); 51 //实现当鼠标移出小圆标的时候继续轮播图片页面和圆标实现效果,此时current为this.index 52 current = this.index; 53 li_v[this.index].style.display = "block"; 54 } 55 } 56 57 //左按钮事件 58 ctrl_v[0].onclick = function() { 59 clearInterval(timer); 60 clearInterval(pre); 61 pre = setTimeout(preclick, 10) 62 timer = setInterval(move, 1500); 63 } 64 //封装点击左按钮实现上个一个图片 65 function preclick() { 66 for (var i = 0; i < li_v.length; i++) { 67 li_v[i].style.display = "none"; 68 p_v[i].className = ""; 69 } 70 current = (current - 1 + li_v.length) % li_v.length; 71 // console.log(current); 72 li_v[current].style.display = "block"; 73 p_v[current].className = "active"; 74 }; 75 // 右边按钮事件实现下一张图片 76 ctrl_v[1].onclick = function() { 77 clearInterval(timer); 78 clearInterval(nex); 79 nex = setTimeout(move, 10) 80 timer = setInterval(move, 1500); 81 } 82 </script>
欢迎来访，你们的瓶子。。。mua，大家晚安
