jQ实现图片无缝轮播

前端开发作者： 2024-08-23 08:50:01

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

在铺页面的过程中，总是会遇到轮播图需要处理，一般我是会用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="image/1.jpg" alt=""/>
          </li>
          <li>
              <img src="image/2.jpg" alt=""/>
          </li>
          <li>
              <img src="image/3.jpg" alt=""/>
          </li>
          <li>
              <img src="image/4.jpg" alt=""/>
          </li>
          <li>
              <img src="image/5.jpg" alt=""/>
          </li>
          <li>
              <img src="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>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_67153.html

相关资讯： jQ实现图片无缝轮播