脚本宝典收集整理的这篇文章主要介绍了js实例教程-适合新手最简单的原生js轮播图实现讲解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
经过几天的努力，终于攻克了这一难题，于是迫不及待的想要分享给大家，编写之前，我也看了不少其他博主的博客，大多是用偏移量写的，对新手来说，还是有些难以理解，虽然可能实现的需求不一样，但我想先从简入手，所以自己查阅资料，修改bug，终于完成。话不多说，上代码：如果可以的话，顺手给个赞，给新手点鼓励呗~~~
<!DOCTYPE htML> <html lang="en"> <head> <;meta charset="UTF-8"> <meta name="viewport" content="width=device-width, inITial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=Edge"> <title>Document</title> <script src="jquery.js"></script> <style> *{ margin: 0px; padding:0px; list-style: none; text-decoration: none; } #flash{ /*根据图片的大小来设置外层p的大小*/ width: 520px; height: 280px; margin: 0 auto; position: relative; /*设置p定位，方便之后图片及圆点位置的设定*/ border:1px solid black; } #flash img{ width: 100%; height: 100%; position: absolute; /*设置所有图片重叠*/ left: 0px; top: 0px; display: none; /*设置所有图片隐藏，通过改变第一个图片的行间样式来使第一个图片显示*/ } #flash ul{ width: 150px; height: 25px; border-radius: 20px; background-color:rgba(255,255,255,0.5); position: absolute; left: 35%; bottom: 10%; } #flash ul li{ width: 12px; height: 12px; margin-top:5px; background-color: #fff; border-radius: 50%; margin-left: 15px; float: left; } #flash ul .li_1{ background-color: #f40; /*设置第一个圆点背景色为红色*/ } #flash .span-r{ width: 50px; height: 50px; border-radius: 50%; position: absolute; right: 2%; top: 45%; background-color: rgba(255,255,255,0.5); } #flash .span-r span{ width: 100%; height:100%; color:rgba(0,0,0,0.5); font-Size: xx-large; font-weight: 700; line-height: 50px; margin-left: 15px; cursor: pointer; } #flash .span-l{ width: 50px; height: 50px; border-radius: 50%; position: absolute; left: 2%; top: 45%; background-color: rgba(255,255,255,0.5); } #flash .span-l span{ width: 100%; height:100%; color:rgba(0,0,0,0.5); font-size: xx-large; font-weight: 700; line-height: 50px; margin-left: 15px; cursor: pointer; } </style> </head> <p id="flash"> <img src="img1.jpg" alt="" style="display: block"> <img src="img2.jpg" alt=""> <img src="img3.jpg" alt=""> <img src="img4.jpg" alt=""> <img src="img5.jpg" alt=""> <ul> <li class="li_1"></li> <li></li> <li></li> <li></li> <li></li> </ul> <p class="span-r"> <span>></span> </p> <p class="span-l"> <span><</span> </p> </p> <body> <script> VAR p = document.getElementById('flash'); var img = p.getelementsbytagname('img'); /*选中p下所有的图片*/ var ul = document.getElementsByTagName('ul')[0]; var li = ul.getElementsByTagName('li'); var p_r = document.getElementsByTagName('p')[1]; // var span_r = p_r.getElementsByTagName('span'); var p_l = document.getElementsByTagName('p')[2]; // var sapn_l = p_l.getElementsByTagName('span'); var len = img.length; var count = 0; /*设置count来显示当前图片的序号*/ function run(){ /*将定时器里的函数提取到外部*/ count++; count = count==5?0:count; /*当图片加载到最后一张时，使其归零*/ for(var i=0;i<len;i++){ img[i].style.display = 'none'; /*利用for循环使除当前count位其他图片隐藏*/ } img[count].style.display = 'block'; /*显示当前count的值所代表的图片*/ for(var i=0;i<li.length;i++){ li[i].style.backgroundColor = "#fff"; /*原理同上*/ } li[count].style.backgroundColor = "#f40"; } var timer = setInterval(run,1000); /*定义定时器，使图片每隔1s更换一次*/ p.onmouseover = function(){ clearInterval(timer); } p.onmouseleave = function(){ /*定义鼠标移出事件，当鼠标移出p区域，轮播继续*/ timer = setInterval(run,1000); } for(var i=0;i<len;i++){ li[i].index = i; /*定义index记录当前鼠标在li的位置*/ li[i].onmouseenter = function(){ /*定义鼠标经过事件*/ for(var i=0;i<len;i++){ /*通过for循环将所有图片隐藏，圆点背景设为白色*/ li[i].style.background = '#fff'; img[i].style.display = 'none'; } this.style.background = '#f40'; /*设置当前所指圆点的背景色*/ img[this.index].style.display = 'block'; /*使圆点对应的图片显示*/ } } p_r.onclick = function(){ /*因为span没有设置宽高，直接把事件添加到他的父级*/ run(); /*直接调用现成的run函数*/ } function reverse(){ count--; count = count==-1?4:count; for(var i=0;i<len;i++){ img[i].style.display = 'none'; /*利用for循环使除当前count位其他图片隐藏*/ } img[count].style.display = 'block'; /*显示当前count的值所代表的图片*/ for(var i=0;i<li.length;i++){ li[i].style.backgroundColor = "#fff"; /*原理同上*/ } li[count].style.backgroundColor = "#f40"; } p_l.onclick = function(){ reverse(); /*重新设置函数*/ } </script> </body> </html>
运行效果如下：
经过几天的努力，终于攻克了这一难题，于是迫不及待的想要分享给大家，编写之前，我也看了不少其他博主的博客，大多是用偏移量写的，对新手来说，还是有些难以理解，虽然可能实现的需求不一样，但我想先从简入手，所以自己查阅资料，修改bug，终于完成。话不多说，上代码：如果可以的话，顺手给个赞，给新手点鼓励呗~~~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery.js"></script> <style> *{ margin: 0px; padding:0px; list-style: none; text-decoration: none; } #flash{ /*根据图片的大小来设置外层p的大小*/ width: 520px; height: 280px; margin: 0 auto; position: relative; /*设置p定位，方便之后图片及圆点位置的设定*/ border:1px solid black; } #flash img{ width: 100%; height: 100%; position: absolute; /*设置所有图片重叠*/ left: 0px; top: 0px; display: none; /*设置所有图片隐藏，通过改变第一个图片的行间样式来使第一个图片显示*/ } #flash ul{ width: 150px; height: 25px; border-radius: 20px; background-color:rgba(255,255,255,0.5); position: absolute; left: 35%; bottom: 10%; } #flash ul li{ width: 12px; height: 12px; margin-top:5px; background-color: #fff; border-radius: 50%; margin-left: 15px; float: left; } #flash ul .li_1{ background-color: #f40; /*设置第一个圆点背景色为红色*/ } #flash .span-r{ width: 50px; height: 50px; border-radius: 50%; position: absolute; right: 2%; top: 45%; background-color: rgba(255,255,255,0.5); } #flash .span-r span{ width: 100%; height:100%; color:rgba(0,0,0,0.5); font-size: xx-large; font-weight: 700; line-height: 50px; margin-left: 15px; cursor: pointer; } #flash .span-l{ width: 50px; height: 50px; border-radius: 50%; position: absolute; left: 2%; top: 45%; background-color: rgba(255,255,255,0.5); } #flash .span-l span{ width: 100%; height:100%; color:rgba(0,0,0,0.5); font-size: xx-large; font-weight: 700; line-height: 50px; margin-left: 15px; cursor: pointer; } </style> </head> <p id="flash"> <img src="img1.jpg" alt="" style="display: block"> <img src="img2.jpg" alt=""> <img src="img3.jpg" alt=""> <img src="img4.jpg" alt=""> <img src="img5.jpg" alt=""> <ul> <li class="li_1"></li> <li></li> <li></li> <li></li> <li></li> </ul> <p class="span-r"> <span>></span> </p> <p class="span-l"> <span><</span> </p> </p> <body> <script> var p = document.getElementById('flash'); var img = p.getElementsByTagName('img'); /*选中p下所有的图片*/ var ul = document.getElementsByTagName('ul')[0]; var li = ul.getElementsByTagName('li'); var p_r = document.getElementsByTagName('p')[1]; // var span_r = p_r.getElementsByTagName('span'); var p_l = document.getElementsByTagName('p')[2]; // var sapn_l = p_l.getElementsByTagName('span'); var len = img.length; var count = 0; /*设置count来显示当前图片的序号*/ function run(){ /*将定时器里的函数提取到外部*/ count++; count = count==5?0:count; /*当图片加载到最后一张时，使其归零*/ for(var i=0;i<len;i++){ img[i].style.display = 'none'; /*利用for循环使除当前count位其他图片隐藏*/ } img[count].style.display = 'block'; /*显示当前count的值所代表的图片*/ for(var i=0;i<li.length;i++){ li[i].style.backgroundColor = "#fff"; /*原理同上*/ } li[count].style.backgroundColor = "#f40"; } var timer = setInterval(run,1000); /*定义定时器，使图片每隔1s更换一次*/ p.onmouseover = function(){ clearInterval(timer); } p.onmouseleave = function(){ /*定义鼠标移出事件，当鼠标移出p区域，轮播继续*/ timer = setInterval(run,1000); } for(var i=0;i<len;i++){ li[i].index = i; /*定义index记录当前鼠标在li的位置*/ li[i].onmouseenter = function(){ /*定义鼠标经过事件*/ for(var i=0;i<len;i++){ /*通过for循环将所有图片隐藏，圆点背景设为白色*/ li[i].style.background = '#fff'; img[i].style.display = 'none'; } this.style.background = '#f40'; /*设置当前所指圆点的背景色*/ img[this.index].style.display = 'block'; /*使圆点对应的图片显示*/ } } p_r.onclick = function(){ /*因为span没有设置宽高，直接把事件添加到他的父级*/ run(); /*直接调用现成的run函数*/ } function reverse(){ count--; count = count==-1?4:count; for(var i=0;i<len;i++){ img[i].style.display = 'none'; /*利用for循环使除当前count位其他图片隐藏*/ } img[count].style.display = 'block'; /*显示当前count的值所代表的图片*/ for(var i=0;i<li.length;i++){ li[i].style.backgroundColor = "#fff"; /*原理同上*/ } li[count].style.backgroundColor = "#f40"; } p_l.onclick = function(){ reverse(); /*重新设置函数*/ } </script> </body> </html> 运行效果如下：
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-适合新手最简单的原生js轮播图实现讲解全部内容，希望文章能够帮你解决js实例教程-适合新手最简单的原生js轮播图实现讲解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。