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