0
回答
撰寫跑馬燈/廣告輪撥的好工具:jQuery Cycle Plugin
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

jQuery 是我最常用的 JavaScript Library,而且外掛程式超多,有空的人是可以多上去看看有什麼新玩意,保證有許多驚喜!我大約是在一年前得知有 jQuery Cycle Plugin 這個 jQuery 外掛套件吧,當時為了找一個可以「跨瀏覽器」的廣告輪播套件找了好久,也試用了好幾套,不過大部分廣告輪播或跑馬燈的 JavaScript Library 都不盡理想,最後才選擇用 jQuery Cycle Plugin 來做為跑馬燈/廣告輪播的撰寫工具。

想看 jQuery Cycle Plugin 執行效果只要連上官網就可以看到了,至於如何使用那更是容易啦,先介紹一個簡單的範例:

假設有三張圖片你希望能依序輪流顯示:

<div class="pics"> 
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>

然後先定義這一區的 CSS

.pics {  
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0;
}

然後只要寫一行 JavaScript 就完成了整個廣告輪播的工作:

$('.pics').cycle('fade');

若你想調整輪播的速度(假設每 5 秒鐘換一張圖)

$('.pics').cycle({ 
fx: 'fade',
speed: 5000
});

整體來說就是這個簡單,當然你也可以使用較複雜的效果或設定,完整的選項說明可以在這裡找到。

底下是官網上提供的示範與程式碼範例:

举报
红薯
发帖于9年前 0回/1K+阅
顶部