效果圖如下，只能用滾輪移動(dòng)到頭部和尾部

?

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

思路：

根據(jù)需要展示的圖片數(shù)量（view-count）與slide-container中存放的圖片數(shù)量設(shè)置ul的長(zhǎng)度，然后設(shè)置每個(gè)li的均等寬度。

每次滾輪滾動(dòng)ul移動(dòng)一個(gè)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; //當(dāng)前圖片索引//設(shè)置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'});}//統(tǒng)一處理滾輪滾動(dòng)事件function wheel(event) {var delta = 0;if (!event) event = window.event;if (event.wheelDelta) { //IE、chrome瀏覽器使用的是wheelDelta，并且值為“正負(fù)120”delta = event.wheelDelta / 120;if (window.opera)//因?yàn)镮E、chrome等向下滾動(dòng)是負(fù)值，FF是正值，為了處理一致性，在此取反處理delta = -delta;} else if (event.detail) { //FF瀏覽器使用的是detail,其值為“正負(fù)3”delta = -event.detail / 3;}if (delta) {handle(delta);//阻止事件冒泡重復(fù)執(zhí)行和屏幕向下滾動(dòng)event.preventDefault() && event.stopPropagation();}}//上下滾動(dòng)時(shí)的具體處理函數(shù)function handle(delta) {//滾輪向上滾動(dòng)if (delta < 0) {curImgIndex++;} else if (delta > 0) { //向下滾動(dòng)curImgIndex--;}move();}function move() {//到達(dá)兩端則不移動(dòng)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;}());

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。