在铺页面的过程中，总是会遇到轮播图需要处理，一般我是会用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. Python高级语法-私有属性-with上下文管理器(4.7.3）

    @ 目录 1.说明 2.代码 关于作者 1.说明 上下文管理器 这里使用with open操作文件,让文件对象实现了自动释放资源.我们也能自定义上下文管理器,通过__enter__()和__exit_ ...

  2. SPI机制剖析——基于DriverManager+ServiceLoader的源码分析

    我的上一篇博客类加载器与双亲委派中提到,SPI机制是一种上级类加载器调用下级类加载器的情形,因此会打破类加载的双亲委派模型.为了深入理解其中的细节,本博客详细剖析一下SPI机制,并以JDBC为例,基于 ...

  3. .Net 常用ORM框架对比：EF Core、FreeSql、SqlSuger

    前言: 最近由于工作需要,需要选用一种ORM框架,也因此对EF Core.FreeSql.SqlSuger作简单对比.个人认为各有有优势,存在即合理,不然早就被淘汰了是吧,所以如何选择因人而议.因项目 ...

  4. [从源码学设计]蚂蚁金服SOFARegistry 之 如何与Meta Server交互

    [从源码学设计]蚂蚁金服SOFARegistry 之 如何与Meta Server交互 目录 [从源码学设计]蚂蚁金服SOFARegistry 之 如何与Meta Server交互 0x00 摘要 0 ...

  5. Python 搜索文件，文件过滤，pathlib模块

    1,搜索文件,文件过滤 这里使用:pathlib 模块的  Path.glob(pattern)  方法,该方法可以用来过滤目标文件,以迭代器的形式返回搜索结果. pattern: 通配符:" ...

  6. 用git上传项目到GitHub或者码云全过程

    用git上传项目到GitHub或者码云全过程 1. 会生成一个隐藏文件夹".git".这是一个不可删文件,因为暂存区和历史区还有一些其他的信息都在这里,删掉就不是一个完整的仓库了 ...

  7. [leetcode33Search in Rotated Sorted Array]在排序旋转后序列中找目标值

    直接上代码 /** * Created by lvhao on 2017/6/30. * Suppose an array sorted in ascending order is rotated a ...

  8. leetcode 274H-index

    public int hIndex(int[] citations) { /* 唠唠叨叨说了很多 其实找到一个数h,使得数组中至少有h个数大于等于这个数, 其他N-h个数小于这个数,h可能有多个,求最 ...

  9. 关于一台电脑使用多个GitHub账户管理代码的记录

    @参考原文 记录这个操作是因为需要将一些代码放出去到公共仓库上以便使用github pages线上预览今天页面的功能,但是碰到了一个很狗血的问题,虽然最后莫名其妙的解决了,但还是不知缘由,希望能在评论 ...

  10. informix部署安装

    informix部署安装 一.环境准备 Linux版本:centos7.6 Linux主机名:localhost informix安装包:ibm.ids.14.10.FC4W1.LNX.tar inf ...