利用javascript怎么实现一个图片轮播功能

今天就跟大家聊聊有关利用javascript怎么实现一个图片轮播功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

思路：

根据需要展示的图片数量（view-count）与slide-container中存放的图片数量设置ul的长度，然后设置每个li的均等宽度。

每次滚轮滚动ul移动一个li的距离

HTML：

<div class="slide-container" view-count="4">  <ul>  <li>   <img src="images/women/15444293310974910.jpg" alt=""/>  </li>  <li>   <img src="images/women/15444293312083674.jpg" alt=""/>  </li>  <li>   <img src="images/women/15444293313734437.jpg" alt=""/>  </li>  <li>   <img src="images/women/15444293315979953.jpg" alt=""/>  </li>  <li>   <img src="images/women/15444293316955485.jpg" alt=""/>  </li>  <li>   <img src="images/women/15444293317767707.jpg" alt=""/>  </li>  </ul> </div>

CSS：

.slide-container {   max-width: 1230px;   margin: auto;   overflow: hidden;  }    .slide-container ul {   transition: all 0.5s linear;  }    .slide-container li {   float: left;  }    .slide-container img {   width: 100%;  }

JS：

(function () {    let slider = $('.slide-container'),   li = slider.find('li'),   length = li.length,   curImgIndex = 0; //当前图片索引    //设置ul宽度和li的宽度  function initSlider() {   slider.find('ul').css({   'width': length / slider.attr('view-count') * 100 + '%'   });   li.css({   'width': 'calc(' + 100 / length + '% - 10px)',   'margin': '0 5px'   });  }    //统一处理滚轮滚动事件  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) {   curImgIndex++;   } else if (delta > 0) { //向下滚动   curImgIndex--;   }   move();  }    function move() {     //到达两端则不移动   if (curImgIndex > li.length - slider.attr('view-count') || curImgIndex < 0){   if(curImgIndex > 0 ){    curImgIndex--;   }else{    curImgIndex++;   }   return false;   }   slider.find('ul').css({   'transform': 'translateX( -' + 100 / length * curImgIndex + '% )'   })  }    initSlider();    //绑定滚轮事件兼容性写法  if (window.addEventListener)   slider.get(0).addEventListener('DOMMouseScroll', wheel, false);  slider.get(0).onmousewheel = wheel; }());

看完上述内容，你们对利用javascript怎么实现一个图片轮播功能有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。