- A+
所属分类：Web前端
在铺页面的过程中，总是会遇到轮播图需要处理，一般我是会用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="jQ实现图片无缝轮播" alt=""/> </li> <li> <img src="image/2.jpg" alt="jQ实现图片无缝轮播" alt=""/> </li> <li> <img src="image/3.jpg" alt="jQ实现图片无缝轮播" alt=""/> </li> <li> <img src="image/4.jpg" alt="jQ实现图片无缝轮播" alt=""/> </li> <li> <img src="image/5.jpg" alt="jQ实现图片无缝轮播" alt=""/> </li> <li> <img src="image/6.jpg" alt="jQ实现图片无缝轮播" 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*Wd/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>
