基于JavaScript無縫效果輪播圖的設(shè)計與實現(xiàn)

齊彩霞

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

關(guān)鍵詞：輪播圖iQuery動畫效果

引言

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

1輪播圖設(shè)計思路

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

2代碼實現(xiàn)

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

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

2.3實現(xiàn)自動切換，使用setlnterval（）設(shè)置一定時間自動切換到下一張。

實現(xiàn)ImageSelect函數(shù)實現(xiàn)圖像的自動輪播，代碼中i用于保存當(dāng)前顯示圖片的索引，代碼如下：

function ImageSelect（）{

++i;

isCrack（）;

dotChange（）;

}

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

var speed = 300;

function isCrack（）{

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

l—1：

$（.ImageList）.css（{left：

0}）;

}

$（.ImageList）.stop（）.animate“l(fā)eft： i}width}，speed）;

}

接下來實現(xiàn)dotChange函數(shù)，完成圖片自動切換，具體實現(xiàn)如下：

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）;

}

}

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

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

2.4鼠標(biāo)滑過圓點顯示對應(yīng)的圖片，實現(xiàn)代碼如下：

2.5實現(xiàn)箭頭的左右切換

3總結(jié)

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

參考文獻

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

[2]王曉華，運用css和JavaScript技術(shù)設(shè)計網(wǎng)頁輪播圖[J].科技視界.2018（1）

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

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

[5]李軼，基于JavaScript的面向?qū)ο蟪绦蛟O(shè)計研究[J].江漢大學(xué)學(xué)報（自然科學(xué)版），2010，38（03）：52-56.