齊彩霞

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

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

引言

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

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

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

2代碼實(shí)現(xiàn)

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

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

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

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

function ImageSelect（）{

++i;

isCrack（）;

dotChange（）;

}

isCrack函數(shù)實(shí)現(xiàn)自動(dòng)切換，speed保存動(dòng)畫切換的速度，其最后一張圖片就是第一張圖片，這樣可以保證無縫切換，因此，輪播結(jié)束后i的值為1，讓其直接顯示第2張圖片，同時(shí)將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）;

}

接下來實(shí)現(xiàn)dotChange函數(shù)，完成圖片自動(dòng)切換，具體實(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）;

}

}

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

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

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

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

3總結(jié)

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

參考文獻(xiàn)

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

[2]王曉華，運(yùn)用css和JavaScript技術(shù)設(shè)計(jì)網(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ì)研究[J].江漢大學(xué)學(xué)報(bào)（自然科學(xué)版），2010，38（03）：52-56.