jQuery特效之「無縫」輪播圖效果，發現真的很簡單！
輪播圖，也是一個網站開發中最最常用的功能，很大程度上提高了網站的用戶體驗，那這麼高大上的輪播圖是如何用js山西i安的呢？且聽我慢慢倒來。
一、HTML結構
HTML與CSS的配置，說實話是很多JS特效的根基，結構理清楚，css設置好，再用JS使其效果富有運動感，這是目前絕大多數前端JS特效的基本做法。
輪播圖的HTML結構的關鍵點：
最外層放置輪播圖片的DIV的寬度和高度要和一張圖片的寬、高一致，相對定位，並且使用溢出隱藏：overflow:hidden。
輪播圖片的父級DIV使用絕對定位控制位置。高度與圖片高度一致，寬度是幾張圖片的總和。由於其上一層的DIV有溢出隱藏，所以多餘的圖片不會顯示出來的。
Advertisements
輪播圖片左浮動，這樣就會水平排列在一行。
無縫就是將第一張圖片在最後再冗餘一張。
看出來點眉目了吧，其實輪播輪播切換的就是圖片父級DIV的left值，正值為從左往右輪播，負值為從右往左輪播。
下面我給出大家HTML結構：
HTML結構
二、CSS
三、jQuery讓圖片動起來
jQuery效果的話就跟昨天講的tab切換效果很類似了，我想如果是看了tab切換效果並實現了的同學，看到這應該也有自己的思路了。
自動切換肯定還是使用間歇調用setInterval。
自動切換少不了一個全局的大總管變數，它代表當前圖片及tip文字的索引。
廢話不多說了，沒思路的同學看下面的代碼，然後別忘了自己動手去敲代碼實現。
jQuery特效
Advertisements
上篇的Tab切換效果我是用JavaScript原生實現的，而這個輪播圖效果是使用jQuery實現的，其實原理差不多，但是對比代碼就會發現jQuery真的是大大提高了開發效率，簡化了代碼。