原生js实现轮播图的示例代码pc软件 文章资讯 手机软件

您当前的位置→图文中心网站专题网站建设原生js实现轮播图的示例代码

原生js实现轮播图的示例代码


2017/2/20  编辑:admin 来源:本站整理   

很多网站上都有轮播图, 但却很难去寻找到一个系统system讲解的, 因此这里做一个不复杂的介绍说明, 真的希望大家都能有所收获, 如果有哪些不对的的地方, 真的希望大家可以能够指出。

原理:

将一些图片PHOTO就在一行中平铺, 之后计算偏移量再利用定时器实现定时轮播。

步骤一:建立html可以说是布局

如下所示:

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>轮播图</title></head><body>  <div class="container">    <div class="wrap" style="left:-600px;">      <img src="./img/5.jpg" alt="">      <img src="./img/1.jpg" alt="">      <img src="./img/2.jpg" alt="">      <img src="./img/3.jpg" alt="">      <img src="./img/4.jpg" alt="">      <img src="./img/5.jpg" alt="">      <img src="./img/1.jpg" alt="">    </div>    <div class="buttons">      <span>1</span>      <span>2</span>      <span>3</span>      <span>4</span>      <span>5</span>    </div>    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow_left"><</a>    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow_right">></a>  </div></body></html>

 只有五张图片PHOTO, 却使用7张来轮播, 这是为了实现无缝轮播, 后面会详细介绍说明。

而5个span, 即我们我自己可以能够实时看到轮播图就在目前所处的详细位置。

最后是两个按钮按键, 可以能够可以通过它来控制前进与后退。

这里我们我自己有请求需要对wrap使用绝对定位, 所以用left:-600px;将第一张图片PHOTO显示出来。

步骤二: css布局

最先是, resetcss, 如下所示:

* {      margin:0;      padding:0;    }    a{      text-decoration: none;    }

接着, 我们我自己为了让图片PHOTO只就在container中, 所以有请求需要限定其宽度和高度并且使用overflow:hidden;将其余的图片PHOTO隐藏起来, 并且我们我自己真的希望wrap相对于container左右移动, 所以布置设置为relative, 如下:

   .container {      position: relative;      width: 600px;      height: 400px;      margin:100px auto 0 auto;      box-shadow: 0 0 5px green;      overflow: hidden;    }     

我们我自己布置设置wrap是绝对定位的, 所以,我们我自己就可以能够可以通过控制Left和Right来控制图片PHOTO的移动了。 布置设置z-index:1;以对后面将要放置的buttons作为参考。 因为共有七张图片PHOTO, 所以width为4200px(每张图片PHOTO我们我自己布置设置为600X400),我们我自己只需让图片PHOTO左浮动即可实现占满一排了。

    .wrap {      position: absolute;      width: 4200px;      height: 400px;      z-index: 1;    }

之后我们我自己把图片PHOTO布置设置位左浮动, 并限定其大小, 如下所示:

  .container .wrap img {      float: left;      width: 600px;      height: 400px;    }

现就在的效果如下:

    

即这时已经显示出了第一张图片PHOTO。 并且充满了整个container(container是有box-shadow的);

之后我们我自己把显示次序的buttons放就在图片PHOTO的右下角。 并且布置设置z-index:2;以保证buttons是就在图片PHOTO的上面的。  

    .container .buttons {      position: absolute;      right: 150px;      bottom:20px;      width: 100px;      height: 10px;      z-index: 2;    }

之后将buttons下面的span做一个不复杂的修饰, 并且给和图片PHOTO对应的span布置设置一个on类, 如下: 

    .container .buttons span {      margin-left: 5px;      display: inline-block;      width: 20px;      height: 20px;      border-radius: 50%;      background-color: green;      text-align: center;      color:white;      cursor: pointer;    }    .container .buttons span.on{      background-color: red;    }

接下来, 我们我自己把左右切换的箭头加上, 之后做不复杂的修饰, 提醒一定要注意:因为这里使用实体来表示左右箭头, 所以布置设置font-size才能改变其大小,

    .container .arrow {      position: absolute;      top: 35%;      color: green;      padding:0px 14px;      border-radius: 50%;      font-size: 50px;      z-index: 2;      display: none;    }    .container .arrow_left {      left: 10px;    }    .container .arrow_right {      right: 10px;    }    .container:hover .arrow {      display: block;    }    .container .arrow:hover {      background-color: rgba(0,0,0,0.2);    }

步骤三:添加js逻辑

我们我自己最先是获取到 wrap(因为要布置设置其left才能控制轮播图), 之后获取到左右两个箭头, 并实现手动轮播, 如下: 

 var wrap = document.querySelector(".wrap");    var next = document.querySelector(".arrow_right");    var prev = document.querySelector(".arrow_left");    next.onclick = function () {      next_pic();    }    prev.onclick = function () {      prev_pic();    }    function next_pic () {      var newLeft = parseInt(wrap.style.left)-600;      wrap.style.left = newLeft + "px";    }    function prev_pic () {      var newLeft = parseInt(wrap.style.left)+600;      wrap.style.left = newLeft + "px";    }

值得提醒一定要注意的是, 这里wrap.style.left是一个字符串, 所以要转化为数字才能来进行计算, 而设定left时就要加上px成为一个字符串了。

现就在我们我自己来测试一下:

 

可以能够看到, 就在第一页时, left值为-600, 所以我们我自己可以能够用鼠标点击一次上一张, 但是当再用鼠标点击一次时, 就出现了空白。 同样的, 下一张用鼠标点击, 到-3600是最后一张, 就不能够再继续用鼠标点击了。   

也就是说, 当我们我自己用鼠标点击下一张到-3600px(这是第一张图片PHOTO)时, 我们我自己有请求需要下次跳转到第二张, 即-1200px;这样才能正常跳转;

同理, 当我们我自己用鼠标点击上一张到0px(这是第五张图片PHOTO时), 我们我自己真的希望下次跳转到第四张, 即-2400px;

按照这样的思路我们我自己重新将next_pic和prev_pic函数修改如下: 

    function next_pic () {      var newLeft;      if(wrap.style.left === "-3600px"){        newLeft = -1200;      }else{        newLeft = parseInt(wrap.style.left)-600;      }      wrap.style.left = newLeft + "px";    }    function prev_pic () {      var newLeft;      if(wrap.style.left === "0px"){        newLeft = -2400;      }else{        newLeft = parseInt(wrap.style.left)+600;      }      wrap.style.left = newLeft + "px";    }

这时, 我们我自己就可以能够发现图片PHOTO可以能够循环播放了!

但是, 这时我们我自己只只时手动循环播放的, 我们我自己如果真的希望全自动播放, 使用setInterval()即可, 如下所示: 

    var timer = null;    function autoPlay () {      timer = setInterval(function () {        next_pic();      },1000);    }    autoPlay();

即先设定一个计时器, 之后建造一个可以能够全自动播放的函数, 最后调用这个函数即可。 现就在它就可以能够全自动播放了, 效果如下:

  

但是如果我们我自己想要仔细看其中一个图片PHOTO的时候, 我们我自己真的希望轮播图停止stop播放, 只要clearInterval()即可, 如下:

    var container = document.querySelector(".container");    container.onmouseenter = function () {      clearInterval(timer);    }    container.onmouseleave = function () {      autoPlay();      }

现就在, 只要我们我自己把鼠标移入轮播图中, 这时轮播图就将不会播放了。 而移开鼠标之后, 轮播图全自动播放。

但是到就在目前为止, 轮播图下方的小圆点还没有动, 现就在我们我自己就实现它。

原理很不复杂, 即布置设置buttons的index初始值为0, 即第一个span的class为on, 之后触发next_pic函数时, index加1, 当触发prev_pic函数时, inex减1, 并布置设置当前index的小圆点的class为on, 这就要求index就一定要布置设置为全局变量, 才能保证它就在每一个函数的作用域中。

添加showCurrentDot函数:

    var index = 0;    var dots = document.getElementsByTagName("span");    function showCurrentDot () {      for(var i = 0, len = dots.length; i < len; i++){        dots[i].className = "";      }      dots[index].className = "on";    }

就在next_pic中添加代码:

      index++;      if(index > 4){        index = 0;      }

就在prev_pic中添加大吗:

      index--;      if(index < 0){        index = 4;      }      showCurrentDot();

这样, 轮播图就可以能够全自动切换, 并且小圆点也就在随着图片PHOTO的变化而变化了。

但是, 这距离我们我自己经常看到的轮播图还是有一定距离 - - - 当用鼠标点击小圆点时, 就可跳转到相应图片PHOTO。 实现原理即:  用鼠标点击小圆点, 就使wrap的Left变成相应的值。 代码如下:

 

 for (var i = 0, len = dots.length; i < len; i++){      (function(i){        dots[i].onclick = function () {          var dis = index - i;          if(index == 4 && parseInt(wrap.style.left)!==-3000){            dis = dis - 5;             }          //和使用prev和next相同, 就在最现在开始的照片5和最后的照片1就在使用时会出现问题, 导致符号和位数的出错, 做相应地处理即可          if(index == 0 && parseInt(wrap.style.left)!== -600){            dis = 5 + dis;          }          wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px";          index = i;          showCurrentDot();        }      })(i);          }

原理就是当用鼠标点击到小圆点时, 得到相应的i值, 这个i值也就是span的index值, 我们我自己拿他和全局变量index作比较, 之后重新布置设置wrap.style.left的值, 之后把i值复制给全局变量index, 最后显示当前的小原点即可。 值得提醒一定要注意的是:这里涉及到了闭包的概念, 如果直接使用for循环, 则不能够得到对的的结果。

最后效果如图:

  

最后代码如下所示:

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>轮播图</title>  <style>    * {      margin:0;      padding:0;    }    a{      text-decoration: none;    }    .container {      position: relative;      width: 600px;      height: 400px;      margin:100px auto 0 auto;      box-shadow: 0 0 5px green;      overflow: hidden;    }    .container .wrap {      position: absolute;      width: 4200px;      height: 400px;      z-index: 1;    }    .container .wrap img {      float: left;      width: 600px;      height: 400px;    }    .container .buttons {      position: absolute;      right: 5px;      bottom:40px;      width: 150px;      height: 10px;      z-index: 2;    }    .container .buttons span {      margin-left: 5px;      display: inline-block;      width: 20px;      height: 20px;      border-radius: 50%;      background-color: green;      text-align: center;      color:white;      cursor: pointer;    }    .container .buttons span.on{      background-color: red;    }    .container .arrow {      position: absolute;      top: 35%;      color: green;      padding:0px 14px;      border-radius: 50%;      font-size: 50px;      z-index: 2;      display: none;    }    .container .arrow_left {      left: 10px;    }    .container .arrow_right {      right: 10px;    }    .container:hover .arrow {      display: block;    }    .container .arrow:hover {      background-color: rgba(0,0,0,0.2);    }  </style></head><body>  <div class="container">    <div class="wrap" style="left: -600px;">      <img src="./img/5.jpg" alt="">      <img src="./img/1.jpg" alt="">      <img src="./img/2.jpg" alt="">      <img src="./img/3.jpg" alt="">      <img src="./img/4.jpg" alt="">      <img src="./img/5.jpg" alt="">      <img src="./img/1.jpg" alt="">    </div>    <div class="buttons">      <span class="on">1</span>      <span>2</span>      <span>3</span>      <span>4</span>      <span>5</span>    </div>    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_left"><</a>    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_right">></a>  </div>  <script>    var wrap = document.querySelector(".wrap");    var next = document.querySelector(".arrow_right");    var prev = document.querySelector(".arrow_left");    next.onclick = function () {      next_pic();    }    prev.onclick = function () {      prev_pic();    }    function next_pic () {      index++;      if(index > 4){        index = 0;      }      showCurrentDot();      var newLeft;      if(wrap.style.left === "-3600px"){        newLeft = -1200;      }else{        newLeft = parseInt(wrap.style.left)-600;      }      wrap.style.left = newLeft + "px";    }    function prev_pic () {      index--;      if(index < 0){        index = 4;      }      showCurrentDot();      var newLeft;      if(wrap.style.left === "0px"){        newLeft = -2400;      }else{        newLeft = parseInt(wrap.style.left)+600;      }      wrap.style.left = newLeft + "px";    }    var timer = null;    function autoPlay () {      timer = setInterval(function () {        next_pic();      },2000);    }    autoPlay();    var container = document.querySelector(".container");    container.onmouseenter = function () {      clearInterval(timer);    }    container.onmouseleave = function () {      autoPlay();      }    var index = 0;    var dots = document.getElementsByTagName("span");    function showCurrentDot () {      for(var i = 0, len = dots.length; i < len; i++){        dots[i].className = "";      }      dots[index].className = "on";    }    for (var i = 0, len = dots.length; i < len; i++){      (function(i){        dots[i].onclick = function () {          var dis = index - i;          if(index == 4 && parseInt(wrap.style.left)!==-3000){            dis = dis - 5;             }          //和使用prev和next相同, 就在最现在开始的照片5和最后的照片1就在使用时会出现问题, 导致符号和位数的出错, 做相应地处理即可          if(index == 0 && parseInt(wrap.style.left)!== -600){            dis = 5 + dis;          }          wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px";          index = i;          showCurrentDot();        }      })(i);          }  </script></body></html>

 总结:

实现一个轮播图还是不难的, 大体思路: 先建造一个div, 限定其宽度和高度, overflow:hidden。 之后建造一个装图片PHOTO的div, 宽度为所有图片PHOTO的总宽度, 并且使其浮动, 这样所有的图片PHOTO就处于一行中。 之后为了实现无缝滚动, 所以有请求需要就在首尾分别添加一张过渡图片PHOTO。 先添加两个按钮按键, 使其可以能够手动轮播, 之后只有请求需要添加一个定时器使其朝一个方向全自动轮播即可, 因为用户有时有请求需要查看详情, 所以当鼠标进入时就clear定时器, 滑出再定时播放。 为了更好地用户体验, 我们我自己再下面添加了一排小圆点, 用户可以能够清楚地知道现就在所处的详细位置, 最后, 利用闭包使得用户可以能够直接可以通过用鼠标点击小圆点切换图片PHOTO。

相关文章
  • 谷歌Pixel 2搭载原生安卓系统,这才是叫板iPhone的机皇!
  • 原生JS实现《别踩白块》游戏(兼容IE)
  • 原生js实现轮播图的示例代码
  • iOS 10原生应用删除会清空数据吗
  • iOS9不越狱隐藏原生应用图标
  • iOS9原生输入法四大神器插件deb安装方法
  • 发表评论
    阅读排行
    相关热门
    网站帮助 - 广告合作 - 下载声明 - 网站地图