摘要:经过几天的努力,终于攻克了这一难题,于是迫不及待的想要分享给大家,编写之前,我也看了不少其他博主的博客,大多是用偏移量写的,对新手来说,还是有些难以理解,虽然可能实现的需求不一样,但我想先从简入手,所以自己查阅资料,修改bug,终于完成。话不多说,上代码:如果可以的话,顺手给个赞,给新手点鼓励呗~~~

脚本宝典收集整理的这篇文章主要介绍了

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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过