圖片幻燈片是在網(wǎng)頁開發(fā)中常見的一種效果，幾乎是誰處可見。我今天想要實現(xiàn)的幻燈片的效果圖如下：

它的html的代碼非常的簡單：

<div class="img-wrap"><ul><li><img src="./image/aa.webp"/></li><li><img src="./image/bb.jpg"/></li><li><img src="./image/cc.jpg"/></li><li><img src="./image/ee.webp"/></li></ul><div class="nav-dot"><span class="on"></span><span></span><span></span><span></span></div> </div>

我們實現(xiàn)幻燈片效果的原理很簡單，就是通過適當(dāng)?shù)馗淖儓D片容器ul的left值，來達(dá)到圖片切換的效果。
這是它的css代碼：

.img-wrap {width: 520px;height: 280px;position: relative;margin: 100px auto 0;border: 1px solid #F00;overflow: hidden; /* 瀏覽器底部就不會有滾動條了 */ }.img-wrap ul {position: absolute;left: 0;top: 0;margin: 0;padding: 0; }.img-wrap ul li {list-style: none;float: left; }.img-wrap ul li img {display: block; /* 消除img的魔鬼間距 */ }.nav-dot {font-size: 0; /* 消除inline-block自帶的間距 */position: absolute;left: 50%;bottom: 10px;margin-left: -26px; }.nav-dot span {display: inline-block;padding-top: 8px; /* 利用padding-top的值代替高度 */width: 8px;height: 0;background: #fff;border-radius: 50%;margin-right: 5px;cursor: pointer; }.nav-dot span.on {background: #FF5000; }

因為我們是要用js來改變ul的left值的，所以我們要給ul元素設(shè)置一個定位position： absolute。
它的js代碼如下：

window.onload = function () {var oUl = document.querySelector('ul');var aLi = oUl.getElementsByTagName('li');var aWidth = aLi[0].offsetWidth;var liLen = aLi.length;oUl.style.width = liLen * aWidth + 'px';var oNavDot = document.querySelector('.nav-dot');var aSpan = oNavDot.querySelectorAll('span');for (var i = 0; i < aSpan.length; i++) {aSpan[i].index = i;}// 事件委托 - 利用事件冒泡機制oNavDot.addEventListener('click', function (e) {var target = e.target || e.srcElement;if (target.tagName == 'SPAN') {oUl.style.left = -aWidth * target.index + 'px';for (var i = 0; i < aSpan.length; i++) {aSpan[i].className = '';}target.className = 'on';}})}

在js代碼中，我們運用了一個js的開發(fā)技巧——事件委托。事件委托利用了事件冒泡的原理，因為子元素觸發(fā)的事件會傳遞（冒泡）到父元素上，所以我們直接把事件處理函數(shù)綁定到父元素上，從而不用在每一個子元素上都綁定事件，減少了瀏覽器的dom操作，提升了頁面的性能。
以上的js代碼不是模塊化的開發(fā)方法，現(xiàn)在的web應(yīng)用越來越復(fù)雜了，我們都應(yīng)該用模塊化的思想來寫代碼了。這里我打算用匿名閉包IIFE模式來改造上面的代碼。
IIFE(Immediately-Invoked Function Expression)，即立即執(zhí)行的函數(shù)表達(dá)式，就是用一個大括號把一個匿名函數(shù)包著，然后在這個大括號里放入一個小括號在匿名函數(shù)旁邊以調(diào)用這個匿名函數(shù)，最后將這一整塊賦值給一個變量。IIFE可以創(chuàng)造一個塊級的作用域，最重要的是，它是js中模塊化開發(fā)的一種模式。
模塊化的代碼如下：

var slide = (function () {var module = {};var attr = {oUl: document.querySelector('ul'),oNavDot: document.querySelector('.nav-dot')};// 設(shè)置包裹圖片的ul的寬度方法module.setUlWidth = function () {var aLi = attr['oUl'].getElementsByTagName('li');var aWidth = aLi[0].offsetWidth;var liLen = aLi.length;attr['oUl'].style.width = liLen * aWidth + 'px';};// 設(shè)置span的索引值(index)方法module.setIdx = function () {var aSpan = attr['oNavDot'].querySelectorAll('span');for (var i = 0; i < aSpan.length; i++) {aSpan[i].index = i;}};// 滑動方法module.slider = function () {// 事件委托 - 利用事件冒泡機制attr['oNavDot'].addEventListener('click', function (e) {var target = e.target || e.srcElement;if (target.tagName == 'SPAN') {attr['oUl'].style.left = -attr['oUl'].getElementsByTagName('li')[0].offsetWidth * target.index + 'px';for (var i = 0; i < attr['oNavDot'].querySelectorAll('span').length; i++) {attr['oNavDot'].querySelectorAll('span')[i].className = '';}target.className = 'on';}})};return module; }());window.onload = function () {slide.setUlWidth();slide.setIdx();slide.slider(); }

我們會發(fā)現(xiàn)，通過模塊化的開發(fā)，js實現(xiàn)幻燈片的邏輯更加的清晰了。

總結(jié)

以上是生活随笔為你收集整理的原生JS实现图片幻灯片效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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