在铺页面的过程中，总是会遇到轮播图需要处理，一般我是会用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之数据类型

    格式化字符串 字符串格式化是一种非常简洁的特性,它能让我们动态更新字符串中的内容.假设我们有从服务器获取的用户信息,并希望根据该信息显示自定义消息,第一个想法是应用字符串连接之类的东西. first_ ...

  2. 深入理解MySQL系列之索引

    索引 查找一条数据的过程 先看下InnoDB的逻辑存储结构: 表空间:可以看做是InnoDB存储引擎逻辑结构的最高层,所有的数据都存放在表空间中.默认有个共享表空间ibdata1.如果启用innodb ...

  3. 短链接服务Octopus的实现与源码开放

    前提 半年前(2020-06)左右,疫情触底反弹,公司的业务量不断提升,运营部门为了方便短信.模板消息推送等渠道的投放,提出了一个把长链接压缩为短链接的功能需求.当时为了快速推广,使用了一些比较知名的 ...

  4. [LeetCode]9. Palindrome Number判断回文数字

    /* 查看网上的思路有两种: 1.每次取两边的数,然后进行比较 2.取数的倒置数,进行比较 */ public boolean isPalindrome1(int x) { if (x<0) r ...

  5. Mac苹果电脑安装虚拟机

    Mac上的虚拟机推荐安装  Parallel Desktop For Mac 1.安装Parallel Desktop 2.下载Windows7 3.用Parallel Desktop安装Window ...

  6. 庐山真面目之十微服务架构 Net Core 基于 Docker 容器部署 Nginx 集群

    庐山真面目之十微服务架构 Net Core 基于 Docker 容器部署 Nginx 集群 一.简介      前面的两篇文章,我们已经介绍了Net Core项目基于Docker容器部署在Linux服 ...

  7. 远程控制卡 使用ipmitools设置ipmi

    远程控制卡 使用ipmitools设置ipmi 使用DELL的远程控制卡可以方便的管理服务器 在CentOS中可以使用ipmitools管理 IPMI( Intelligent Platform Ma ...

  8. 茅坑杀手与Alias Method离散采样

    说起Alias,你可能第一个联想到的是Linux中的Alias命令,就像中世纪那些躲在茅坑下面(是真的,起码日本有粪坑忍者,没有马桶的年代就是社会的噩梦)进行刺杀的杀手一样,让人防不胜防,对于那些被这 ...

  9. sa-token v1.9.0 版本已发布，带来激动人心新特性：同端互斥登录

    sa-token是什么? sa-token是一个JavaWeb轻量级权限认证框架, 官网首页:http://sa-token.dev33.cn/ 如果你经常使用腾讯QQ,就会发现它的登录有如下特点:它 ...

  10. Phoneix（四）hbase导入数据同时与phoenix实现映射同步

    一.说明 先创建一个hbase表格,能够导入本地数据到hbase中,最后能够通过phoneix进行访问. 1.数据准备(10W条,样例如下),文件test.txt 0,20190520164020,1 ...