jquery仿163網易圖片新聞幻燈片切換鼠標點擊縮略圖片文字內容和圖片切換



99 395 132



特效描述:jquery 新聞幻燈片切換 鼠標點擊縮略圖片 文字內容圖片切換,帶縮略圖的幻燈片,代碼層次非常好,可以配合數據調用。

代碼結構

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://www.dijiuzhanzhang.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://www.dijiuzhanzhang.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://www.dijiuzhanzhang.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://www.dijiuzhanzhang.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://www.dijiuzhanzhang.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://www.dijiuzhanzhang.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://www.dijiuzhanzhang.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>



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


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 全屏焦點圖 全屏切換 寬屏全屏 寬屏 全屏 頁面全屏 頁面寬屏 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片全屏 帶縮略圖的幻燈片 帶簡介的焦點圖 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 文字切換 文字選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子