基于jQuery實現163網易圖片幻燈片切換



34 132 45



特效描述:基于jQuery實現 163網易圖片 幻燈片切換,基于jQuery實現163網易圖片幻燈片切換

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousellite.min.js"></script>

2. HTML代碼

<div class="MainBg">
	<div class="HS10"></div>
	<div class="Title">
		<h1>開車回家過春季希望高速公路一路暢通</h1>
		<span class="Counter">(<span class="CounterCurrent">1</span>/7)</span>
	</div>
	<div class="SpaceLine"></div>
	<div class="OriginalPicBorder">
		<div id="OriginalPic">
			<div id="aPrev" class="CursorL"></div>
			<div id="aNext" class="CursorR"></div>
			<p class="Hidden">
				<span class="Summary FlLeft">
				臺風登陸吳川,來不及躲避的行人被吹倒。7月22日13時45分,2010年第3號臺風“燦都”在吳川市吳陽鎮沿海地區登陸。登陸時中心附近最大風力12 
				級,陣風15級,風速高達35米/秒。據初步統計,全市共93.9萬人受災,倒塌房屋689間,直接經濟損失12.48億元。 </span>
				<span class="SliderPicBorder FlRight"><img src="pic/127e5101-309d-4699-9e14-93150b1eb36f.jpg" /></span>
				<span class="Clearer"></span>
				<span class="More">
					<a href="pic/127e5101-309d-4699-9e14-93150b1eb36f.jpg" target="_blank">
				查看原圖</a>
					<span class="OptLine">|</span>
					<a href="http://51qianduan.com/">更多圖庫</a>
				</span>
			</p>
			<p class="Hidden">
				<span class="Summary FlLeft">Elie 
				Saab一直都是明星們最愛的紅毯禮服,設計師永遠專注于他的禮服設計,Elie 
				Saab本季的高級定制為女性展現了一個奢華的公主夢,華麗的服飾,奢侈的配飾,閃爍著熠熠光彩,在帶給我們炫目耀眼時尚感覺的同時,亦讓我們感受到了優雅而生動的女性魅力。一幅幅清新的水彩畫,畫里走出的是花神般圣潔的身影,輕盈的紗質面料貫穿全場,花朵造型處處可見。</span>
				<span class="SliderPicBorder FlRight"><img src="pic/fd020de3-5596-4abf-b77a-09b693203376.jpg" /></span>
				<span class="Clearer"></span>
				<span class="More">
					<a href="pic/fd020de3-5596-4abf-b77a-09b693203376.jpg" target="_blank">
				查看原圖</a>
					<span class="OptLine">|</span>
					<a href="http://51qianduan.com/">更多圖庫</a>
				</span>
			</p>
			<p class="Hidden">
				<span class="Summary FlLeft">文化藝術類單幅金獎-車模另一面 
				2010年8月28日,浙江寧波國際汽車博覽會,后臺休息間隙,24歲的車模紫軒站到椅子上,用手機為同伴拍照。</span>
				<span class="SliderPicBorder FlRight"><img src="pic/8144f000-4c92-4f66-bd5a-dae48ca37b0d.jpg" /></span>
				<span class="Clearer"></span>
				<span class="More">
					<a href="pic/8144f000-4c92-4f66-bd5a-dae48ca37b0d.jpg" target="_blank">
				查看原圖</a>
					<span class="OptLine">|</span>
					<a href="http://51qianduan.com/">更多圖庫</a>
				</span>
			</p>
			<p class="Hidden">
				<span class="Summary FlLeft">體育新聞類單幅銅獎-水上飛 
				2010年10月15日,中國柳州世界水上極速運動大賽第二單元——水上摩托艇世錦賽較量,自由花式選手在比賽中。</span>
				<span class="SliderPicBorder FlRight"><img src="pic/5a1b9d3a-7846-4ccc-a634-09593b89595f.jpg" /></span>
				<span class="Clearer"></span>
				<span class="More">
					<a href="pic/5a1b9d3a-7846-4ccc-a634-09593b89595f.jpg" target="_blank">
				查看原圖</a>
					<span class="OptLine">|</span>
					<a href="http://51qianduan.com/">更多圖庫</a>
				</span>
			</p>
			<p class="Hidden">
				<span class="Summary FlLeft">日常生活類單幅銀獎-女交警微笑執勤 
				2010年4月9日下午,在西安市西華門十字,一男子坐在崗臺上醉言醉語,崗臺上的女警面帶微笑照常執勤。隨后,交警蓮湖大隊的男交警趕來,將男子強行帶離。本著人性化執法考慮,因該男子的“糾纏”只是醉酒后無意行為,民警將其批評教育后放人。</span>
				<span class="SliderPicBorder FlRight"><img src="pic/9c30ceb5-dece-4278-9717-27df61d69a69.jpg" /></span>
				<span class="Clearer"></span>
				<span class="More">
					<a href="pic/9c30ceb5-dece-4278-9717-27df61d69a69.jpg" target="_blank">
				查看原圖</a>
					<span class="OptLine">|</span>
					<a href="http://51qianduan.com/">更多圖庫</a>
				</span>
			</p>
			<p class="Hidden">
				<span class="Summary FlLeft">
				早上等燈的時候看見這一串腳印,可惜沒帶相機,只能用手機了。路面的雪清理的太快了,壓根兒不像下過雪的樣子。朝陽路最近很好走,這兩天幾乎都是四十多分鐘就能到,我很滿足,我很欣慰。</span>
				<span class="SliderPicBorder FlRight"><img src="pic/b047fbe5-eaa9-418a-a9bd-ad01925f6005.jpg" /></span>
				<span class="Clearer"></span>
				<span class="More">
					<a href="pic/b047fbe5-eaa9-418a-a9bd-ad01925f6005.jpg" target="_blank">
				查看原圖</a>
					<span class="OptLine">|</span>
					<a href="http://51qianduan.com/">更多圖庫</a>
				</span>
			</p>
			<p class="Hidden">
				<span class="Summary FlLeft">
				“沒有穆巴拉克的埃及,將可能是一個軍方控制的、有極端傾向的、不利于中東和平穩定的、各派爭斗導致局勢長期混沌的埃及,即埃及人逼迫穆巴拉克辭職,對埃及人不一定有利。無論埃及人此舉是福是禍,都是自由選擇必須要承擔的代價,任何群體不可能既想自由選擇,又不想承擔自由選擇后果和責任。”</span>
				<span class="SliderPicBorder FlRight"><img src="pic/15af3ea6-10f1-45ef-9dfa-6bf9013a3915.jpg" /></span>
				<span class="Clearer"></span>
				<span class="More">
					<a href="pic/15af3ea6-10f1-45ef-9dfa-6bf9013a3915.jpg" target="_blank">
				查看原圖</a>
					<span class="OptLine">|</span>
					<a href="http://51qianduan.com/">更多圖庫</a>
				</span>
			</p>
		</div>
	</div>
	<div class="SpaceLine"></div>
	<div class="HS15"></div>
	<div class="ThumbPicBorder">
		<img src="images/ArrowL.jpg" id="btnPrev" class="FlLeft" style="cursor:pointer;" />
		<div class="jCarouselLite FlLeft">
			<ul id="ThumbPic">
				<li rel='1'><img src="pic/127e5101-309d-4699-9e14-93150b1eb36f_T.jpg" /></li>
				<li rel='2'><img src="pic/fd020de3-5596-4abf-b77a-09b693203376_T.jpg" /></li>
				<li rel='3'><img src="pic/8144f000-4c92-4f66-bd5a-dae48ca37b0d_T.jpg" /></li>
				<li rel='4'><img src="pic/5a1b9d3a-7846-4ccc-a634-09593b89595f_T.jpg" /></li>
				<li rel='5'><img src="pic/9c30ceb5-dece-4278-9717-27df61d69a69_T.jpg" /></li>
				<li rel='6'><img src="pic/b047fbe5-eaa9-418a-a9bd-ad01925f6005_T.jpg" /></li>
				<li rel='7'><img src="pic/15af3ea6-10f1-45ef-9dfa-6bf9013a3915_T.jpg" /></li>
			</ul>
			<div class="Clearer"></div>
		</div>
		<img src="images/ArrowR.jpg" id="btnNext" class="FlLeft" style="cursor:pointer;" />
		<div class="Clearer"></div>
	</div>
	<div class="HS15"></div>
</div>
<script type="text/javascript">
//縮略圖滾動事件
$(".jCarouselLite").jCarouselLite({
	btnNext: "#btnNext",
	btnPrev: "#btnPrev",
	scroll: 1,
	speed: 240,
	circular: false,
	visible: 6
});
</script>
<script type="text/javascript">
var currentImage;
var currentIndex = -1;
//顯示大圖(參數index從0開始計數)
function showImage(index){
	//更新當前圖片頁碼
	$(".CounterCurrent").html(index + 1);
	//隱藏或顯示向左向右鼠標手勢
	var len = $('#OriginalPic img').length;
	if(index == len - 1){
		$("#aNext").hide();
	}else{
		$("#aNext").show();
	}
	if(index == 0){
		$("#aPrev").hide();
	}else{
		$("#aPrev").show();
	}
	//顯示大圖            
	if(index < $('#OriginalPic img').length){
		var indexImage = $('#OriginalPic p')[index];
		//隱藏當前的圖
		if(currentImage){
			if(currentImage != indexImage){
				$(currentImage).css('z-index', 2);	
				$(currentImage).fadeOut(0,function(){
					$(this).css({'display':'none','z-index':1})
				});
			}
		}
		//顯示用戶選擇的圖
		$(indexImage).show().css({'opacity': 0.4});
		$(indexImage).animate({opacity:1},{duration:200});
		//更新變量
		currentImage = indexImage;
		currentIndex = index;
		//移除并添加高亮
		$('#ThumbPic img').removeClass('active');
		$($('#ThumbPic img')[index]).addClass('active');
		//設置向左向右鼠標手勢區域的高度                        
		//var tempHeight = $($('#OriginalPic img')[index]).height();
		//$('#aPrev').height(tempHeight);
		//$('#aNext').height(tempHeight);                        
	}
}
//下一張
function ShowNext(){
	var len = $('#OriginalPic img').length;
	var next = currentIndex < (len - 1) ? currentIndex + 1 : 0;
	showImage(next);
}
//上一張
function ShowPrep(){
	var len = $('#OriginalPic img').length;
	var next = currentIndex == 0 ? (len - 1) : currentIndex - 1;
	showImage(next);
}
//下一張事件
$("#aNext").click(function(){
	ShowNext();
	if($(".active").position().left >= 144 * 5){
		$("#btnNext").click();
	}
});
//上一張事件
$("#aPrev").click(function(){
	ShowPrep();
	if($(".active").position().left <= 144 * 5){
		$("#btnPrev").click();
	}
});
//初始化事件
$(".OriginalPicBorder").ready(function(){
	ShowNext();
	//綁定縮略圖點擊事件
	$('#ThumbPic li').bind('click',function(e){
		var count = $(this).attr('rel');
		showImage(parseInt(count) - 1);
	});
});
</script>
<div style="text-align:center;clear:both">
</div>



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


熱門標簽: 圖片疊加 圖片層疊 圖片翻轉 圖片旋轉 圖片拖動 圖片拖拽 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 頭像上傳 圖片上傳 二維碼 圖片放大鏡 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 帶縮略圖的幻燈片 地圖 中國地圖 世界地圖 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 滾動切換 滾動條切換 圖片廣告 滑動選項卡 滑動切換 純圖片輪播 圖片輪播 圖片收縮展開 圖片收縮 圖片展開 圖片滾動 圖片滾動條 圖片滑動 圖片滑塊 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片切換 圖片選項卡 圖標選項卡 圖標導航 圖標菜單 自動滾動圖片輪播 滑動手風琴 背景切換 大圖切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖表 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片 圖片插件 頭像截圖 縮略圖 帶簡介的焦點圖 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 圖片切換 切換圖片 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子