js幻灯片轮播图实现效果
轮播图是现在网站网页上最常见的效果之一，对于轮播图的功能，要求不同，效果也不同！我们见过很多通过不同的方式，实现这一效果，但是有很多比较麻烦，而且不容易理解，兼容性也不好。原生JS实现幻灯片的示例代码,具有很好的参考价值，在这里分享一下，用js原生代码，实现轮播图的常见效果！思路比较清晰，而且可重复性高，也几乎包含了现在网页上轮播实现的所有效果！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #fk{ width: 1200px; height: 535px; border: 2px solid blueviolet; margin: 50px auto; position: relative; } #fk img{ position: absolute; top: 0; left: 0; display: none; } #fk ul{ position: absolute; bottom: 23px; left: 548px; } #fk ul li{ list-style: none; width: 12px; height: 12px; background: #DDDDDD; float: left; margin-right: 8px; border-radius: 50%; } </style> <script type="text/javascript"> // 注意:多个方式控制同一块元素效果的时候,一定要走同一个变量 要不然手动切换，跟自动定时器的不能同步 window.onload = function(){ var fk = document.getElementById('fk'); var imgs = document.getElementsByTagName('img'); var lis = document.getElementsByTagName('li'); var t = 0; //大总管变量 // 控制函数切换的函数 function dd(){ t++; //2秒走一次变化+1 // 判断,只有五张图片,5个li,到3的时候返回去 if (t==5) { t=0; } // 循环,让所有的图片隐藏,让所有的li变灰 for (var y=0;y<5;y++) { imgs[y].style.display = 'none'; lis[y].style.background = '#DDDDDD' } // 让t号图片显示,t号li变红 imgs[t].style.display = 'block'; lis[t].style.background = '#A10000'; } var timer = setInterval(dd,1000); // var timer = setInterval(function(){ // t++; //1秒走一次变化+1 //// 判断,只有五张图片,五个li,到5的时候返回去 // if (t==5) { // t=0; // } //// 循环,让所有的图片隐藏,让所有的li变灰 // for (var y=0;y<5;y++) { // imgs[y].style.display = 'none'; // lis[y].style.background = '#DDDDDD' // } //// 让t号图片显示,t号li变红 // imgs[t].style.display = 'block'; // lis[t].style.background = '#A10000'; // },1000) // 循环,加li加事件 for (var y=0;y<lis.length;y++) { // 给y号li加序号 lis[y].sh = y; // 给y号li加鼠标加移入事件 lis[y].onmouseover = function(){ // 先把lis移入的序号存到大总管变量t里,统一变量 t = this.sh; // 这里移入鼠标就变手动的了,要停止上面的定时器 clearInterval(timer); // alert(this.sh); // 循环,让所有的图片隐藏,让所有的li变灰 for (var y=0;y<5;y++) { imgs[y].style.display = 'none'; lis[y].style.background = '#DDDDDD' } // 让this.sh对应的图片显示 imgs[t].style.display = 'block'; lis[t].style.background = '#A10000'; // imgs[this.sh].style.display = 'block'; // lis[this.sh].style.background = '#A10000'; } // 移入事件结束 // 鼠标移出事件 恢复定时器 lis[y].onmouseout =function(){ timer = setInterval(dd,1000); } // 鼠标移出事件结束 } } </script> </head> <body> <div id="fk"> <img src="https://www.qiquanji.com/data/img/dmj/201903101552188163753008.jpg" alt="" style="display: block;"/> <img src="https://www.qiquanji.com/data/img/dmj/201903101552188163335544.jpg" alt="" /> <img src="https://www.qiquanji.com/data/img/dmj/201903101552188164175308.jpg" alt="" /> <img src="https://www.qiquanji.com/data/img/dmj/201903101552188164956825.jpg" alt="" /> <img src="https://www.qiquanji.com/data/img/dmj/201903101552188164532873.jpg" alt="" /> <ul> <li style="background: #A10000;"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> 代码效果图片
本文 2019年08月30日 最后编辑
原文链接：https://www.qiquanji.com/post/7721.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知