在铺页面的过程中，总是会遇到轮播图需要处理，一般我是会用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. Unity射击游戏实例—物理碰撞的实现

    前言: 这一篇章实现物理碰撞,就是游戏体碰撞减装甲,这几天想要试着做出兼具装甲与血量的模式,可自动回复的装甲与永久损伤的血量,在一些平台上找到了不少有意思的模型,有兴趣的可以自己找找模型替换一下. 射 ...

  2. netsniff恶意流量识别和匹配解读

    代码整体框架 流量扫描函数调用 加载配置文件的代码调用 获取扫描的条数 重点匹配函数 流量eg:'\x00\x04\x00\x01\x00\x06\x00\x16>\x10\x1d>SW\ ...

  3. Nginx-rtmp+ FFmpeg +Docker + vue.js 直播系统搭建

    思路(如图): 1,开启推流服务器(这里我的Nginx-rtmp服务器搭建成功) 进入docker 开启推流服务器  docker run -it -p 1935:1935 -p 8000:80 -- ...

  4. SQL 查询增加语句

    Select 'Insert into Auth_Key Values('''+convert(nvarchar(50),NEWID())+''','''+AuthKey+''',''' +Modul ...

  5. 为什么import React from 'react'，React首字母必须大写？

    很奇怪的是,明明没有用到 React,但是我不得不 import React.这是为什么? import React from 'react'; export default function (pr ...

  6. 30天自制OS（linux环境）-day1

    30天自制OS(linux环境)--第一天 我是在CentOS的环境上面实现的,使用ubuntu的环境也是类似的 第一步:因为要对二进制文件进行编辑,所以安装二进制编辑器hexedit(当然其他的也可 ...

  7. noip2016自测报告

    随便测了一下2016的提高组,发现自己还是太菜了... day1 T1:玩具谜题 一个模拟题,打挂了,只有95分,错的很傻逼 code: #include<bits/stdc++.h> u ...

  8. 改进你的c#代码的5个技巧（二）

    在本文中,我将向你展示c#编程的5个最佳实践.我从日常编程经验中学到了这些实践.我在release模式下测试了所有的代码,并在开发环境稳定后进行了截屏.我想你会喜欢这些建议的. 在使用数据类型之前选择 ...

  9. Hbase性能调优（一）

    转自:https://blog.csdn.net/yueyedeai/article/details/14648111 1.修改Linux配置 Linux系统最大可打开文件数一般默认的参数值是1024 ...

  10. hive2

    4.hive优化 1)跑sql的时候会出现的参数: In order to change the average load for a reducer (in bytes): set hive.exe ...