在铺页面的过程中，总是会遇到轮播图需要处理，一般我是会用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高级语法-import导入-sys.path（4.4.1）

    @ 目录 1.说明 2.代码 关于作者 1.说明 在开发程序的过程中,往往使用sys.path去验证下导入的目录,返回的是列表 先后顺序,就是扫描的先后顺序 ,也可以加入搜索路径 import有个特点 ...

  2. Yii2使用a链接发送post请求

    <?=Html::a(' <img class="list-group-item-icon" src="/frontend/web/images/kplus/ ...

  3. 【收藏】关于元数据(Metadata)和元数据管理，这是我的见过最全的解读！

    本文主要从元数据的定义.作用.元数据管理现状.管理标准和元数据管理功能等方面讲述了我对元数据(Metadata)和元数据管理的认知及理解. 元数据管理 一.元数据的定义 按照传统的定义,元数据(Met ...

  4. day020|python之面向对象基础2

    面向对象基础2 目录 面向对象基础2 7 对象与类型 7.1 类即类型 7.1.1 变量的三个指标 7.1.2 变量类型 7.2 list.append()方法原理 8 对象的高度整合 8.1 通过面 ...

  5. iOS常见遍历方法汇总

    一.for循环 NSArray *iosArray = @[@"L", @"O", @"V", @"E", @" ...

  6. [.NET] WCFDataService项目host到IIS上碰到的一个问题:数据库未能打开

    今天在尝试重现OP一个问题的,遇到了一个新的问题. 项目坏境: WCF Data Service 5.6 Entity Framewrok 5(不用6的原因时要重新配置WCF项目) SQL Serve ...

  7. ElasticSearch设置用户名密码访问

    版本号:7.3.1 1.需要在配置文件中开启x-pack验证, 修改config目录下面的elasticsearch.yml文件,在里面添加如下内容,并重启. xpack.security.enabl ...

  8. [永恒之黑]CVE-2020-0796（漏洞复现）

    实验环境: 靶机:windows10 1903 专业版 攻击机:kali 2020.3 VMware:vmware14 实验工具: Python 3.8.5   msfconsole 实验PROC: ...

  9. leetcode 274H-index

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

  10. 这是一篇SQL注入文章

    目录 注入原理: 1.寻找注入点的方式或注入的地方可能包括. 2.注入点判断方法. 3.注入分类. 数字型: 字符型: 搜索型: XX型(也叫其他型): 4.注入提交方式. 5.注入攻击类型与方式. ...