效果圖如下，只能用滾輪移動到頭部和尾部

?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

思路：

根據需要展示的圖片數量（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;}());

?

總結

以上是生活随笔為你收集整理的使用滚轮轮播图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。