jquery焦点图片左右滑动切换特效代码

2019独角兽企业重金招聘Python工程师标准>>>

焦点图片用的地方很多，主要以首页的横幅广告为主比较适合展示大图片，当前这个左右滑动效果的焦点图特效特点是当我们鼠标移到底部的焦点切换按钮时会在顶部显示缩略图片，而且缩略图片之前也是以滑动的效果进行切换。当然左右两边的箭头按钮是必不可少的了，我们都比较喜欢点击这两个按钮来进行图片之间的切换，点击底部的焦点按钮实在有点不方便，太小巧了。

下面看看它的内容：

<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

转载于:https://my.oschina.net/u/1415286/blog/183778