jQuery浮動縮略圖導航點擊幻燈片播放



119 475 159



特效描述:浮動縮略圖導航 點擊幻燈片播放,jQuery的縮略圖導航廊

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

2. 引入JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

3. HTML代碼

<div id="st_main" class="st_main">
	<img src="images/album/1.jpg" alt="" class="st_preview" style="display:none;"/>
	<div class="st_overlay"></div>
	<div id="st_loading" class="st_loading"><span>Loading...</span></div>
	<ul id="st_nav" class="st_navigation">
		<li class="album">
			<span class="st_link">最新收集<span class="st_arrow_down"></span></span>
			<div class="st_wrapper st_thumbs_wrapper">
				<div class="st_thumbs">
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
				</div>
			</div>
		</li>
		<li class="album">
			<span class="st_link">隨機攝影<span class="st_arrow_down"></span></span>
			<div class="st_wrapper st_thumbs_wrapper">
				<div class="st_thumbs">
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
				</div>
			</div>
		</li>
		<li class="album">
			<span class="st_link">唱片名<span class="st_arrow_down"></span></span>
			<div class="st_wrapper st_thumbs_wrapper">
				<div class="st_thumbs">
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
				</div>
			</div>
		</li>
		<li class="album">
			<span class="st_link">獲獎收集<span class="st_arrow_down"></span></span>
			<div class="st_wrapper st_thumbs_wrapper">
				<div class="st_thumbs">
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
					<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
					<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
					<img src="images/album/thumbs/3.jpg" alt="images/album/3.jpg"/>
					<img src="images/album/thumbs/4.jpg" alt="images/album/4.jpg"/>
				</div>
			</div>
		</li>
		<li>
			<span class="st_link">公司簡介<span class="st_arrow_down"></span></span>
			<div class="st_about st_thumbs_wrapper">
				<div class="st_subcontent">
					<p>我獨自一人,覺得在這個地方存在的魅力,這是創建幸福像我的靈魂。我太高興了,我親愛的朋友,所以吸收的精致感僅僅是安靜的存在,我忽略了我的才華。</p>
				</div>
			</div>
		</li>
	</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript">
	$(function() {
		//the loading image
		var $loader		= $('#st_loading');
		//the ul element 
		var $list		= $('#st_nav');
		//the current image being shown
		var $currImage 	= $('#st_main').children('img:first');
		//let's load the current image 
		//and just then display the navigation menu
		$('<img>').load(function(){
			$loader.hide();
			$currImage.fadeIn(3000);
			//slide out the menu
			setTimeout(function(){
				$list.animate({'left':'0px'},500);
			},
			1000);
		}).attr('src',$currImage.attr('src'));
		//calculates the width of the div element 
		//where the thumbs are going to be displayed
		buildThumbs();
		function buildThumbs(){
			$list.children('li.album').each(function(){
				var $elem 			= $(this);
				var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
				var $thumbs 		= $thumbs_wrapper.children(':first');
				//each thumb has 180px and we add 3 of margin
				var finalW 			= $thumbs.find('img').length * 183;
				$thumbs.css('width',finalW + 'px');
				//make this element scrollable
				makeScrollable($thumbs_wrapper,$thumbs);
			});
		}
		//clicking on the menu items (up and down arrow)
		//makes the thumbs div appear, and hides the current 
		//opened menu (if any)
		$list.find('.st_arrow_down').live('click',function(){
			var $this = $(this);
			hideThumbs();
			$this.addClass('st_arrow_up').removeClass('st_arrow_down');
			var $elem = $this.closest('li');
			$elem.addClass('current').animate({'height':'170px'},200);
			var $thumbs_wrapper = $this.parent().next();
			$thumbs_wrapper.show(200);
		});
		$list.find('.st_arrow_up').live('click',function(){
			var $this = $(this);
			$this.addClass('st_arrow_down').removeClass('st_arrow_up');
			hideThumbs();
		});
		//clicking on a thumb, replaces the large image
		$list.find('.st_thumbs img').bind('click',function(){
			var $this = $(this);
			$loader.show();
			$('<img class="st_preview"/>').load(function(){
				var $this = $(this);
				var $currImage = $('#st_main').children('img:first');
				$this.insertBefore($currImage);
				$loader.hide();
				$currImage.fadeOut(2000,function(){
					$(this).remove();
				});
			}).attr('src',$this.attr('alt'));
		}).bind('mouseenter',function(){
			$(this).stop().animate({'opacity':'1'});
		}).bind('mouseleave',function(){
			$(this).stop().animate({'opacity':'0.7'});
		});
		//function to hide the current opened menu
		function hideThumbs(){
			$list.find('li.current')
				 .animate({'height':'50px'},400,function(){
					$(this).removeClass('current');
				 })
				 .find('.st_thumbs_wrapper')
				 .hide(200)
				 .andSelf()
				 .find('.st_link span')
				 .addClass('st_arrow_down')
				 .removeClass('st_arrow_up');
		}
		//makes the thumbs div scrollable
		//on mouse move the div scrolls automatically
		function makeScrollable($outer, $inner){
			var extra 			= 800;
			//Get menu width
			var divWidth = $outer.width();
			//Remove scrollbars
			$outer.css({
				overflow: 'hidden'
			});
			//Find last image in container
			var lastElem = $inner.find('img:last');
			$outer.scrollLeft(0);
			//When user move mouse over menu
			$outer.unbind('mousemove').bind('mousemove',function(e){
				var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
				var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
				$outer.scrollLeft(left);
			});
		}
	});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 焦點圖 幻燈片 輪播圖 bar焦點圖 浮動菜單 浮動導航 帶縮略圖的幻燈片
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子