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


Posted in Javascript onFebruary 20, 2017

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出。

原理:

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

步骤一:建立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>

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

而5个span,即我们可以实时看到轮播图目前所处的位置。

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

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

步骤二: css布局

首先,resetcss,如下所示:

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

接着,我们为了让图片只在container中,所以需要限定其宽度和高度并且使用overflow:hidden;将其余的图片隐藏起来,并且我们希望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来控制图片的移动了。设置z-index:1;以对后面将要放置的buttons作为参考。 因为共有七张图片,所以width为4200px(每张图片我们设置为600X400),我们只需让图片左浮动即可实现占满一排了。

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

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

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

现在的效果如下:

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

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

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

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

然后将buttons下面的span做一个简单的修饰,并且给和图片对应的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成为一个字符串了。

现在我们来测试一下:

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

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

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

同理,当我们点击上一张到0px(这是第五张图片时),我们希望下次跳转到第四张,即-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";
    }

这时,我们就可以发现图片可以循环播放了!

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

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

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

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

但是如果我们想要仔细看其中一个图片的时候,我们希望轮播图停止播放,只要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();

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

但是,这距离我们经常看到的轮播图还有一定距离 - - - 当点击小圆点时, 就可跳转到相应图片。 实现原理即:  点击小圆点,就使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循环,则不能得到正确的结果。

最终效果如图:

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

最终代码如下所示:

<!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。然后创建一个装图片的div,宽度为所有图片的总宽度,并且使其浮动,这样所有的图片就处于一行中。然后为了实现无缝滚动,所以需要在首尾分别添加一张过渡图片。 先添加两个按钮, 使其可以手动轮播,然后只需要添加一个定时器使其朝一个方向自动轮播即可,因为用户有时需要查看详情,所以当鼠标进入时就clear定时器,滑出再定时播放。为了更好地用户体验,我们再下面添加了一排小圆点,用户可以清楚地知道现在所处的位置, 最后, 利用闭包使得用户可以直接通过点击小圆点切换图片。

Javascript 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
深入理解Javascript中的观察者模式
Feb 20 #Javascript
浅谈js中function的参数默认值
Feb 20 #Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 #Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 #Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 #Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 #Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 #Javascript
You might like
第四章 php数学运算
2011/12/30 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
浅谈javascript的调试
2015/01/28 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
用Python写冒泡排序代码
2016/04/12 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Python进行统计建模
2020/08/10 Python
如何用python批量调整视频声音
2020/12/22 Python
土木工程应届生自荐信
2013/09/24 职场文书
机电一体化自荐信
2013/12/10 职场文书
小学生新年寄语
2014/04/03 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
golang中的struct操作
2021/11/11 Golang