非常酷的jquery多层图片切换焦点图特效

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天介绍这款主题是一款单击缩略图可切换最近的图片,也有可能是上一张图片。这是一种较先进的交换技术,它只需5张图片就可以实现4个不同的缩略图进行切换,是一款不错的焦点图效果。

构建html

<div id="wrapper">
	 <div id="inner">
		 <div id="carousel">
			 <img src="img/large/rat.jpg" width="550" height="310" />
			 <img src="img/large/toystory.jpg" width="550" height="310" />
			 <img src="img/large/up.jpg" width="550" height="310" />
			 <img src="img/large/walle.jpg" width="550" height="310" />
			 <img src="img/large/bugs.jpg" width="550" height="310" />
		 </div>
		 <div id="pager"></div>
	 </div>
 </div>

写入CSS样式

html, body {
	 height: 100%;
	 padding: 0;
	 margin: 0;
 }
 body {
	 background-color: #333;
	 min-height: 400px;
 }
 body * {
	 font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	 font-size: 14px;
	 color: #ccc;
	 line-height: 22px;
 }
 
 #wrapper {
	 width: 660px;
	 height: 310px;
	 margin: -155px 0 0 -330px;
	 position: absolute;
	 top: 50%;
	 left: 50%;
 }
 #wrapper:after {
	 content: url(img/shadow.png);
	 position: absolute;
	 bottom: -40px;
	 left: 5px;
	 z-index: 1;
 }
 #carousel {
	 width: 550px;
	 height: 310px;
	 overflow: hidden;
	 position: relative;
	 z-index: 2;
 }
 #carousel img {
	 display: block;
	 float: left;
 }
 #pager {
	 width: 100px;
	 height: 310px;
	 overflow: hidden;
	 position: absolute;
	 top: 0;
	 right: 0;
 }
 #pager div {
	 height: 80px;
	 width: 100px;
 }
 #pager img {
	 cursor: pointer;
	 display: block;
	 height: 70px;
	 width: 100px;
	 margin-bottom: 10px;
	 float: left;
 }

引入核心库文件

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>

写入JS调用插件,实现效果

$(function() {
	 var $carousel = $('#carousel'),
		 $pager = $('#pager');
 
	 // gather the thumbnails
	 var $thumb = $( '<div class="thumb" />' );
	 $carousel.children().each(function() {
		 var src = $(this).attr( 'src' );
		 $thumb.append( '<img src="' + src.split('/large/').join('/small/') + '" />' );
	 });
 
	 // duplicate the thumbnails
	 for (var a = 0; a < $carousel.children().length - 1; a++) {
		 $pager.append( $thumb.clone() );
	 }
 
	 // create large carousel
	 $carousel.carouFredSel({
		 items: {
			 visible: 1,
			 width: 550,
			 height: 310
		 },
		 scroll: {
			 fx: 'directscroll',
			 onBefore: function( data ) {
				 var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
					 newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
					 $t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();
 
				 $t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
			 }
		 }
	 });
 
	 // create thumb carousels
	 var $thumbs = $('.thumb');
	 $thumbs.each(function( i ) {
		 $(this).carouFredSel({
			 auto: false,
			 scroll: {
				 fx: 'directscroll'
			 },
			 items: {
				 start: i+1,
				 visible: 1,
				 width: 100,
				 height: 80
			 }
		 });
 
		 // click the carousel
		 $(this).click(function() {
			 var src = $(this).children().first().attr('src').split('/small/').join('/large/');
			 $carousel.trigger('slideTo', [$('img[src="' + src + '"]', $carousel), 'next']);
		 });
	 });
 });

完成以上工作,便可实现这非常酷的幻灯片效果。

下载地址:本站下载 | 百度云 | 官方下载

Comments are closed.