在铺页面的过程中，总是会遇到轮播图需要处理，一般我是会用swiper来制作，但总会有哪个几个个例需要我自己来写功能，这里制作了一个jq用来实现图片无缝轮播的dome，分享给大家ヽ(￣▽￣)ﾉ。

dome下载点击这里

具体代码如下：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>图片轮播dome</title>

    <style type="text/css">

      .slide-container {

            max-width: 1060px;

            margin: auto;

            overflow: hidden;

            max-height: 1060px;

        }

        .slide-container li{

            float: left;

        }

        .slide-container img{

            width: 100%;

            height: auto;

        }

    </style>

  </head>

  <body>

    <div class="slide-container" view-count="2">

      <ul>

          <li>

              <img src="data:image/1.jpg" alt=""/>

          </li>

          <li>

              <img src="data:image/2.jpg" alt=""/>

          </li>

          <li>

              <img src="data:image/3.jpg" alt=""/>

          </li>

          <li>

              <img src="data:image/4.jpg" alt=""/>

          </li>

          <li>

              <img src="data:image/5.jpg" alt=""/>

          </li>

          <li>

              <img src="data:image/6.jpg" alt=""/>

          </li>

      </ul>

    </div>

    <script src="jq.js"></script>

  </body>

  <script>

        let orgLen, canMove, curLi, curLen,

            slider = null,

            interval = null,

            curImgIndex = 0;

        function initSlider() {

            let orgLiArray = document.querySelectorAll('.slide-container li');

            orgLen = orgLiArray.length;

            canMove = true;

            slider = $('.slide-container');

            addLi();

            setStyle();

            //添加li

            function addLi() {

                for (let i = 0; i < orgLen; i++) {

                    let preLi = orgLiArray[orgLen - i - 1].cloneNode(true);

                    let apLi = orgLiArray[i].cloneNode(true);

                    document.querySelector('.slide-container ul').prepend(preLi);

                    document.querySelector('.slide-container ul').append(apLi);

                }

            }

            function setStyle() {

                curLi = slider.find('li');

                curLen = curLi.length;

                curLi.css({

                    'width': 'calc(' + 100 / curLen + '% - 10px)',    //动态设置li的宽度

                    'margin': '0 6px'

                });

                //根据实际li个数与ul中用户能够看到的个数比例设置ul宽度

                slider.find('ul').css({

                    'width': curLen / slider.attr('view-count') * 100 + '%',

                });

                //获取到设置了width之后的li宽度

                //通过margin-left 与margin-right 为负数 使中间的原始li集合在slide-container显示

                let width = document.defaultView.getComputedStyle(curLi[0]).width.match(/\d*\W\d/g);

                width = (parseFloat(width) + 20) * orgLen;

                slider.find('ul').css({

                    'margin-left': '-' + width + 'px',

                    'margin-right': '-' + width + 'px',

                });

            }

        }        

        /**

         *  移动函数

         *  每次移动后移除过渡效果

         *  当前第一个图片索引值的绝对值大于原始图片数量则恢复为原始状态

         * @param imgIndex

         */

        function move(imgIndex) {

            canMove = false;     //滚轮滚动中不能再次滚动

            clearInterval(interval);    //清除定时器

            slider.find('ul').css({

                'transition': 'all 0.5s linear'

            });

            setTimeout(function () {    //移动

                slider.find('ul').css({

                    'transform': 'translateX( ' + 100 / curLen * -imgIndex + '% )',

                });

                setTimeout(function () {    //移动完成后清除过渡效果

                    slider.find('ul').css({

                        'transition': '',

                    });

                    setTimeout(function () {

                        if (Math.abs(imgIndex) >= orgLen) {    //到达边界回到初始状态

                            curImgIndex = 0;

                            slider.find('ul').css({

                                'transform': 'translateX(0)'

                            });

                        }

                        canMove = true;

                        startInterval();

                    }, 20);

                }, 500);

            }, 20);

        }

        function startInterval() {

            interval = setInterval(function () {    //开始轮播

                curImgIndex++;

                move(curImgIndex);

            },2000);

        }

        initSlider();

        startInterval();

        //统一处理滚轮滚动事件

        function wheel(event) {

            var delta = 0;

            if (!event) event = window.event;

            if (event.wheelDelta) {     //IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”

                delta = event.wheelDelta / 120;

                if (window.opera)

                //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理

                    delta = -delta;

            } else if (event.detail) {      //FF浏览器使用的是detail,其值为“正负3”

                delta = -event.detail / 3;

            }

            if (delta) {

                handle(delta);

                //阻止事件冒泡和屏幕向下滚动

                event.preventDefault() && event.stopPropagation();

            }

        }

        //上下滚动时的具体处理函数

        function handle(delta) {

            //向上滚动

            if (delta < 0 && canMove) {

                curImgIndex++;

                move(curImgIndex);

            } else if (delta > 0 && canMove) {  //向下滚动

                curImgIndex--;

                move(curImgIndex);

            }

        }

        if (window.addEventListener)    //FF,火狐浏览器会识别该方法

            slider.get(0).addEventListener('DOMMouseScroll', wheel, false);

        slider.get(0).onmousewheel = wheel;     //W3C

  </script>

</html>

jQ实现图片无缝轮播的更多相关文章

  1. js实现图片无缝轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery图片无缝轮播

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  4. jQuery图片无缝轮播插件；

    图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...

  5. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  6. jq写无缝轮播

    今天分享一下我自己早几天写的一个效果:无缝轮播,虽然不难,很简单,也没有封装处理过,但是还是希望能帮到一些前端的小伙伴吧,如果有小伙伴感觉有更简化的写法希望可以一起交流一下,技术在于交流嘛,我的邮箱是 ...

  7. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

  8. iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

  9. iOS开发之ImageView复用实现图片无限轮播

    在上篇博客中iOS开发之多图片无缝滚动组件封装与使用给出了图片无限轮播的实现方案之一,下面在给出另一种解决方案.今天博客中要说的就是在ScrollView上贴两个ImageView, 把ImageVi ...

随机推荐

  1. Go加密算法总结

    前言 加密解密在实际开发中应用比较广泛,常用加解密分为:"对称式"."非对称式"和"数字签名". 对称式:对称加密(也叫私钥加密)指加密和解 ...

  2. matplotlib的学习10-Contours 等高线图

    import matplotlib.pyplot as plt import numpy as np ''' 画等高线 数据集即三维点 (x,y) 和对应的高度值,共有256个点. 高度值使用一个 h ...

  3. matplotlib的学习4-设置坐标轴

    import matplotlib.pyplot as plt import numpy as np x = np.linspace(-3, 3, 50) y1 = 2*x + 1 y2 = x**2 ...

  4. NET 调用人脸识别算法

    以前有个OpenCV 移植版EMCV可以用作图像识别等 https://github.com/emgucv/emgucv 现在有各种接口 比如虹软SDK  https://ai.arcsoft.com ...

  5. 160个Crackerme破解

    001: 第一个破解: 有两种登陆方式:序列号/名字和序列号,观察报错信息 两个报错信息,直接中文搜索字符: 第一种登陆方式报错为:sorry,xx 右键中文字符搜索,ctrl+f输入要搜索的字符,这 ...

  6. Oracle 使用MERGE INTO 语句 一条语句搞定新增编辑

    MERGE INTO RDP_CHARTS_SETTING T1 USING (SELECT '10001' AS PAGE_ID, 'test' AS CHART_OPTION FROM DUAL) ...

  7. Linux嵌入式学习-mount命令+nfs挂载失败原因【转】

    NFS 挂载失败原因[待搜集] 1.挂载时若出现mount.nfs: Input/output error 解决:在客户端也需启动portmap服务 service portmap status[查看 ...

  8. mysql数据库的连接以及增删改查Java代码实现（转载）

    每天叫醒自己的不是闹钟,而是梦想 数据库: create table t1(id int primary key not null auto_increment,name varchar(32),pa ...

  9. JS中var与let的区别

    区别: var声明的变量,其作用域在该语句所在的函数之内,存在着变量提升的现象. let声明的变量,其作用域为该句所在的代码块内,不存在变量提升的问题. let相比于var,其不允许在相同作用域内,重 ...

  10. sh -s用法

    1.基本用法 (1)sh -s 会从标准输入中读取命令,并在子shell中执行 (2)sh -s 后从第一个非 - 开头的参数开始,依次被赋值给子shell的 $1,$2... (3)sh -s 的第 ...