jquery焦點圖片左右滑動切換特效代碼

焦點圖片用的地方不少，主要以首頁的橫幅廣告爲主比較適合展現大圖片，當前這個左右滑動效果的焦點圖特效特色是當咱們鼠標移到底部的焦點切換按鈕時會在頂部顯示縮略圖片，並且縮略圖片以前也是以滑動的效果進行切換。固然左右兩邊的箭頭按鈕是必不可少的了，咱們都比較喜歡點擊這兩個按鈕來進行圖片之間的切換，點擊底部的焦點按鈕實在有點不方便，過小巧了。

下面看看它的內容：

<div id="loader" class="loader"></div>
		<div class="wrapper">
			<h1>Sweet Thumbnails Preview Gallery</h1>
			<div id="ps_container" class="ps_container">
				<div class="ps_image_wrapper">
					<!-- First initial image -->
					<img src="images/1.jpg" alt="" />
				</div>
				<!-- Navigation items -->
				<div class="ps_next"></div>
				<div class="ps_prev"></div>
				<!-- Dot list with thumbnail preview -->
				<ul class="ps_nav">
					<li class="selected"><a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a></li>
					<li><a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a></li>
					<li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li>
					<li><a href="images/4.jpg" rel="images/thumbs/4.jpg">Image 4</a></li>
					<li><a href="images/5.jpg" rel="images/thumbs/5.jpg">Image 5</a></li>
					<li><a href="images/6.jpg" rel="images/thumbs/6.jpg">Image 6</a></li>
					<li><a href="images/7.jpg" rel="images/thumbs/7.jpg">Image 7</a></li>
					<li><a href="images/8.jpg" rel="images/thumbs/8.jpg">Image 8</a></li>
					<li><a href="images/9.jpg" rel="images/thumbs/9.jpg">Image 9</a></li>
					<li><a href="images/10.jpg" rel="images/thumbs/10.jpg">Image 10</a></li>
					<li class="ps_preview">
						<div class="ps_preview_wrapper">
							<!-- Thumbnail comes here -->
						</div>
						<!-- Little triangle -->
						<span></span>
					</li>
				</ul>

			</div>
			
		</div>

咱們主要來看看圖片列表是怎麼添加的；

<li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li>

rel爲縮略圖片的地址路徑；href就是對應的大圖片地址路徑了。

文章來源於jsctrlc特效網：http://www.jsctrlc.com/texiao/65.html