基于JavaScript無縫效果輪播圖的設計與實現

齊彩霞

摘要：在一個網站的首頁，通常會留有一片位置來凸顯網站的動態。例如：新聞網站的頭條熱點等。這片區域采用多張圖片來實現圖片的位置切換，而基于JavaScript無縫效果輪播圖是最常用的方法之一。本文主要介紹了網頁中基于JavaScript無縫效果輪播圖的實現過程，主要通過iQuery的事件和動畫來實現無縫效果輪播圖。

關鍵詞：輪播圖iQuery動畫效果

引言

在網頁實現的過程中，無縫效果輪播圖是比較常見的實現效果之一，但是設計者在使用JavaScript語言來實現無縫效果輪播圖的設計時，經常會遇到各種問題。 本文針對設計者在設計無縫效果輪播圖中出現的問題，詳細介紹設計的原理及其實現過程中應該注意的事項，從而實現JavaScript無縫效果輪播圖的效果。

1輪播圖設計思路

通過JavaScript實現一個完整的無縫輪播圖方案，可以把此部分分為以下幾個功能：主頁、無縫輪播、圓點切換和左右箭頭切換。在網頁實現的過程中，把圖片放在一組li標簽中，目前只定義5組，后續可以根據需求來增加或者減少，也可以通過js實現動態添加圖片數量，從而實現完整的無縫輪播效果，無縫輪播的效果關鍵是處理最后一張圖片和第一張圖片的關系，從而實現無縫切換，同時，設置一個定時時間來定時自動切換圖片。

2代碼實現

2.1實現主頁頁面，ImageList標簽用于存放輪播的圖片，Imagedot標簽用于放底部的小圓點，Imagearrow標簽用于放左右箭頭。并且在標簽中引入用于實現輪播的JS文件l.js。

2.2實現無縫切換，其實現方式是：復制列表中的第一張圖片，追加到列表最后，設置ul的寬度為圖片張數*圖片寬度，實現代碼具體如下。

2.3實現自動切換，使用setlnterval（）設置一定時間自動切換到下一張。

實現ImageSelect函數實現圖像的自動輪播，代碼中i用于保存當前顯示圖片的索引，代碼如下：

function ImageSelect（）{

++i;

isCrack（）;

dotChange（）;

}

isCrack函數實現自動切換，speed保存動畫切換的速度，其最后一張圖片就是第一張圖片，這樣可以保證無縫切換，因此，輪播結束后i的值為1，讓其直接顯示第2張圖片，同時將ul的樣式Ieft值設置O。

var speed = 300;

function isCrack（）{

if（i一一$（.ImageList li）.length）{

l—1：

$（.ImageList）.css（{left：

0}）;

}

$（.ImageList）.stop（）.animate“left： i}width}，speed）;

}

接下來實現dotChange函數，完成圖片自動切換，具體實現如下：

function dotChange（）{

if（i一一$（.ImageList lil）.length - l）{

$（.lmagedot

li）.eq（0）. addClass（10n）. siblings（）.removeClass（10n1）;

} else{

$（1.Imagedot li`）.eq（i）. addClass（'on'）.siblings（）.removeClass（10n1）;

}

}

為了實現輪播，最后一張圖片就是第一張圖片。在設置當前圓點樣式時，通過第2行代碼進行判斷，若遇到是最后一張圖片時，則通過上面第3行代碼設置對應的第1個圓點，而其他情況則通過第5行代碼即可完成設置。

在實現圖片的自動無縫輪播后，還需要設置一個事件來完成圖片切換的暫停，以及移除后繼續切換的效果，代碼如下：

2.4鼠標滑過圓點顯示對應的圖片，實現代碼如下：

2.5實現箭頭的左右切換

3總結

部分初級設計者在設計無縫輪播時，可能會遇到一些問題，尤其是在實現的過程中總會出現一些問題，本文設計的方案為設計者提供了一個完整的思路，可以作為參考，即使后續需要實現較為復雜的方案，也可以利用此方案加入數據庫和后臺API實現完整的功能，比如，首頁的新聞頭條預覽，關鍵信息的展示，廣告位展示等，所以，本文具有很好的參考價值和使用價值。

參考文獻

[1]周芷儀，陳婷.淺談網頁中實現圖片輪播圖效果的方法[J].軟件.2018（3）.

[2]王曉華，運用css和JavaScript技術設計網頁輪播圖[J].科技視界.2018（1）

[3]陳月，秦福建.Web前端開發技術以及優化方向探究[J].信息與電腦（理論版），2016（04）：35+37.

[4]榮艷冬.以崗位需求為導向的Javascript課程構建[J].軟件，2015，36（06）： 18-20.

[5]李軼，基于JavaScript的面向對象程序設計研究[J].江漢大學學報（自然科學版），2010，38（03）：52-56.