首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

JS+JQuery实现无缝连接轮播图

Posted in jQuery onDecember 30, 2020

我之前写过一个简易版的自动+手动轮播图：简易轮播图
但是这个轮播图在切换的时候是没有实现无缝滚动的，每张图片都是单张切换的，而不是滑动。现在用JQuery实现无缝连接的轮播图。

无缝连接的轮播图的原理如下：

JS+JQuery实现无缝连接轮播图

代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>无缝轮播图</title>
</head>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }

  #container {
    position: relative;
    /*轮播图容器的宽高*/
    width: 500px;
    height: 260px;
    margin: 20px auto;
    overflow: hidden;
    /*溢出隐藏：只显示一张图片*/
  }

  #container .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    /*每张图片的宽度和轮播图容器的宽度相等，
    整个图片层长度：500*5=2500，由于克隆了一张，多加一张宽度*/
    width: 3000px;
    height: 100%;
  }

  #container .wrapper li {
    width: 500px;
    height: 100%;
    float: left;
  }

  #container .wrapper li img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    /*去掉未浮动时图片间的上下空隙*/
  }

  #container .btnLeft,
  #container .btnRight {
    display: none;
    z-index: 999;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    background-color: #9E9E9E;
    border-radius: 20%;
    opacity: 60%;
    font-size: 20px;
    color: #673ab7;
    text-align: center;
    line-height: 30px;
  }

  #container .btnLeft {
    left: 0;
  }

  #container .btnRight {
    right: 0;
  }

  #container .btnLeft:hover,
  #container .btnRight:hover {
    opacity: 70%;
    cursor: pointer;
  }

  /* 鼠标滑过图片的时候显示按钮 */
  #container:hover .btnLeft,
  #container:hover .btnRight {
    display: block;
  }

  /*圆点层*/
  #container .dots {
    background: rgba(0, 0, 0, .3);
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 999;
    padding: 4px;
    border-radius: 24px;
  }

  #container .dots li {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #9e9e9e;
    float: left;
    /*可以使用行块盒*/
    /*display: inline-block;*/
    margin: 0 5px;
    cursor: pointer;
  }

  #container .dots li.active {
    background-color: #c74b42;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
</style>

<body>
  <!-- 实现轮播图的容器 -->
  <div id="container">
    <!-- 存放全部图片的容器 -->
    <div class="wrapper">
      <!-- LI: 每张图片 -->
      <li><img src="0.jpg"></li>
      <li><img src="1.jpg"></li>
      <li><img src="2.jpg"></li>
      <li><img src="3.jpg"></li>
      <li><img src="4.jpg"></li>
      <!-- 克隆到末尾 -->
      <li><img src="0.jpg"></li>
    </div>

    <div class="btnLeft"><</div>
    <div class="btnRight">></div>
    <!-- 分页器：圆点 -->
    <div class="dots">
      <ul class="clearfix">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <script src="jquery-1.11.3.min.js"></script>
  <!-- <script src="index.js"></script> -->
  <script type="text/javascript">

    let $container = $('#container'),
      $wrapper = $container.children('.wrapper'),
      $btnLeft = $container.find('.btnLeft'),
      $btnRight = $container.find('.btnRight'),
      $dots = $container.find('.dots'),
      $dotList = $dots.find('li');

    let autoTimer = null,
      interval = 2000,
      imgIndex = 0; //当前轮播的图片索引，默认第一张
    // 自动轮播
    function autoPlay() {
      // 让wrapper向左移动
      imgIndex++;
      /* if(imgIndex === 4) imgIndex = 0; 这样写会导致图片会一下变到第一张，不是无缝滚动
      无缝滚动：
      1. 把第一张克隆一份放到末尾，wrapper中会比真实的图片层多一张
      2. 依然一张张往后滚动，滚动到第5张的时候，继续向后走（imgIndex=6），看到了克隆的第一张，再要向后走的时候，
        让其“立即”跳转到真实的第一张（肉眼看不出跳转），然后运动到第二张......
      */
      if (imgIndex > 5) {
        // 上次显示的是克隆的那张，忽略真实的第一张，让其立即跳转到第二张
        $wrapper.css('left', 0);
        imgIndex = 1;
      }

      // 匀速向左移动
      // 无动画版：$wrapper.css('transform', 'translate(' + (-imgIndex * 500) + 'px)');
      // 动画版：
      $wrapper.stop().animate({
        left: -imgIndex * 500 //JQ自动补'px'
      }, 300);

      showDots();
    }
    autoTimer = setInterval(autoPlay, interval);

    // 圆点对焦
    function showDots() {
      // 由于不能修改imgIndex的值，所以定义一个临时变量
      let temp = imgIndex;
      temp === 5 ? temp = 0 : null;
      $dotList.each((index, item) => {
        let $item = $(item);
        if (index === temp) {
          $item.addClass('active');
          return;
        }
        $item.removeClass('active');
      });
    }

    // 鼠标进入/离开轮播区域时停止/开启自动轮播
    $container.on('mouseenter', () => {
      clearInterval(autoTimer);
    });

    $container.on('mouseleave', () => {
      autoTimer = setInterval(autoPlay, interval);
    });

    // 点击圆点
    $dotList.click(function () {
      let index = $(this).index();
      imgIndex = index;

      $wrapper.stop().animate({
        left: -imgIndex * 500 //JQ自动补'px'
      }, 300);

      showDots();
    });

    // 左键点击
    $btnLeft.click(function () {
      imgIndex--;
      if (imgIndex < 0) {
        // 上次显示的是真实的第一张，忽略克隆的倒数第一张，让其立即跳转倒数第二张
        $wrapper.css('left', -2500);
        imgIndex = 4;
      }

      $wrapper.stop().animate({
        left: -imgIndex * 500 //JQ自动补'px'
      }, 300);

      showDots();
    });

    // 右键点击：相当于自动轮播
    $btnRight.click(function() {
      autoPlay();
    });

  </script>

</body>

</html>

这段代码用单例模式优化一下：

html部分：test.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>无缝轮播图</title>
</head>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }

  #container {
    position: relative;
    /*轮播图容器的宽高*/
    width: 500px;
    height: 260px;
    margin: 20px auto;
    overflow: hidden;
    /*溢出隐藏：只显示一张图片*/
  }

  #container .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    /*每张图片的宽度和轮播图容器的宽度相等，
    整个图片层长度：500*5=2500，由于克隆了一张，多加一张宽度*/
    width: 3000px;
    height: 100%;
  }

  #container .wrapper li {
    width: 500px;
    height: 100%;
    float: left;
  }

  #container .wrapper li img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    /*去掉未浮动时图片间的上下空隙*/
  }

  #container .btnLeft,
  #container .btnRight {
    display: none;
    z-index: 999;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    background-color: #9E9E9E;
    border-radius: 20%;
    opacity: 60%;
    font-size: 20px;
    color: #673ab7;
    text-align: center;
    line-height: 30px;
  }

  #container .btnLeft {
    left: 0;
  }

  #container .btnRight {
    right: 0;
  }

  #container .btnLeft:hover,
  #container .btnRight:hover {
    opacity: 70%;
    cursor: pointer;
  }

  /* 鼠标滑过图片的时候显示按钮 */
  #container:hover .btnLeft,
  #container:hover .btnRight {
    display: block;
  }

  /*圆点层*/
  #container .dots {
    background: rgba(0, 0, 0, .3);
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 999;
    padding: 4px;
    border-radius: 24px;
  }

  #container .dots li {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #9e9e9e;
    float: left;
    /*可以使用行块盒*/
    /*display: inline-block;*/
    margin: 0 5px;
    cursor: pointer;
  }

  #container .dots li.active {
    background-color: #c74b42;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
</style>

<body>
  <!-- 实现轮播图的容器 -->
  <div id="container">
    <!-- 存放全部图片的容器 -->
    <div class="wrapper">
      <!-- LI: 每张图片 -->
      <li><img src="0.jpg"></li>
      <li><img src="1.jpg"></li>
      <li><img src="2.jpg"></li>
      <li><img src="3.jpg"></li>
      <li><img src="4.jpg"></li>
      <!-- 克隆到末尾 -->
      <li><img src="0.jpg"></li>
    </div>

    <div class="btnLeft"><</div>
    <div class="btnRight">></div>
    <!-- 分页器：圆点 -->
    <div class="dots">
      <ul class="clearfix">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <script src="jquery-1.11.3.min.js"></script>
  <script src="index.js"></script>

</body>

</html>

JS部分：index.js

function debounce(func, wait, immediate) {
  let timer = null,
    result = null;
  return function anonymous(...args) {
    let context = this,
      now = immediate && !timer;
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      !immediate ? (result = func.call(context, ...args)) : null;
    }, wait);
    now ? (result = func.call(context, ...args)) : null;
    return result;
  };
}

let bannerModule = (function () {
  let $container = $("#container"),
    $wrapper = $container.children(".wrapper"),
    $btnLeft = $container.find(".btnLeft"),
    $btnRight = $container.find(".btnRight"),
    $dots = $container.find(".dots"),
    $dotList = $dots.find("li");

  let autoTimer = null,
    interval = 2000,
    imgIndex = 0; //当前轮播的图片索引，默认第一张
  // 自动轮播
  function autoPlay() {
    // 让wrapper向左移动
    imgIndex++;
    /* if(imgIndex === 4) imgIndex = 0; 这样写会导致图片会一下变到第一张，不是无缝滚动
        无缝滚动：
        1. 把第一张克隆一份放到末尾，wrapper中会比真实的图片层多一张
        2. 依然一张张往后滚动，滚动到第5张的时候，继续向后走（imgIndex=6），看到了克隆的第一张，再要向后走的时候，
          让其“立即”跳转到真实的第一张（肉眼看不出跳转），然后运动到第二张......
        */
    if (imgIndex > 5) {
      // 上次显示的是克隆的那张，忽略真实的第一张，让其立即跳转到第二张
      $wrapper.css("left", 0);
      imgIndex = 1;
    }

    // 匀速向左移动
    // 无动画版：$wrapper.css('transform', 'translate(' + (-imgIndex * 500) + 'px)');
    // 动画版：
    $wrapper.stop().animate({
      left: -imgIndex * 500 //JQ自动补'px'
    }, 300);

    showDots();
  }

  // 圆点对焦
  function showDots() {
    // 由于不能修改imgIndex的值，所以定义一个临时变量
    let temp = imgIndex;
    temp === 5 ? (temp = 0) : null;
    $dotList.each((index, item) => {
      let $item = $(item);
      if (index === temp) {
        $item.addClass("active");
        return;
      }
      $item.removeClass("active");
    });
  }

  //点击圆点
  function clickDots() {
    $dotList.click(debounce(function () {
      let index = $(this).index();
      imgIndex = index;

      $wrapper.stop().animate({
        left: -imgIndex * 500 //JQ自动补'px'
      }, 300);

      showDots();
    },300,true));
  }

  // 左右按键
  function btnClick() {
    $btnLeft.click(function () {
      imgIndex--;
      if (imgIndex < 0) {
        // 上次显示的是真实的第一张，忽略克隆的倒数第一张，让其立即跳转倒数第二张
        $wrapper.css('left', -2500);
        imgIndex = 4;
      }

      $wrapper.stop().animate({
        left: -imgIndex * 500 //JQ自动补'px'
      }, 300);

      showDots();
    });

    // 右键点击：相当于自动轮播
    $btnRight.click(debounce(autoPlay, 300, true));
  }

  return {
    init: function () {
      autoTimer = setInterval(autoPlay, interval);

      // 鼠标进入/离开轮播区域时停止/开启自动轮播
      $container.on("mouseenter", () => {
        clearInterval(autoTimer);
      });
      $container.on("mouseleave", () => {
        autoTimer = setInterval(autoPlay, interval);
      });

      clickDots();
      btnClick();
    },
  };
})();

bannerModule.init();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JS+JQuery实现无缝连接轮播图

- Author -

南柯Seven

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery树插件zTree使用方法详解
May 02 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
JS实现选项卡插件的两种写法（jQuery和class）
Dec 30 #jQuery
jQuery实现简单轮播图效果
Dec 27 #jQuery
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 #jQuery
jquery实现图片放大镜效果
Dec 23 #jQuery
jQuery实现增删改查
Dec 22 #jQuery
jQuery实现本地存储
Dec 22 #jQuery
对讲机(1) i5 9400(1) i5 10400(1) GTX1660(1) React(6) ipad(1) win11(40) i7 6700(1) R72E(1) win10(43)
You might like
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
php源码的使用方法讲解
2019/09/26 PHP
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
javascript 中iframe高度自适应（同域）实例详解
2017/05/16 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
Python检测QQ在线状态的方法
2015/05/09 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
Swanson中国官网：美国斯旺森健康产品公司
2021/03/01 全球购物
电子信息专业自荐书
2014/02/04 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
创先争优活动心得体会
2014/09/04 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
职工年度考核评语
2014/12/31 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
走进科学观后感
2015/06/18 职场文书