jquery圖片導航標簽圖片滑動門切換



95 377 126



特效描述:導航標簽圖 滑動門切換,jq實現圖片切換,并且有文字介紹

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="contentviewer.css">

2. 引入JS

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

3. HTML代碼

<div id="viewer">
	<ul id="nav">
		<li class="thumb1"><a href="#panel1" class="on">Panel 1</a></li>
		<li class="thumb2"><a href="#panel2">Panel 2</a></li>
		<li class="thumb3"><a href="#panel3">Panel 3</a></li>
		<li class="thumb4"><a href="#panel4">Panel 4</a></li>
		<li class="thumb5"><a href="#panel5">Panel 5</a></li>
	</ul>
	<div id="panels">
		<div id="slider">
			<div id="panel1">
				<img src="img/image1.jpg" alt="Image 1">
				<p>Supernova 1994D, visible as the bright spot at the lower left, occurred in the outskirts of the disk galaxy NGC 4526.</p>
			</div>
			<div id="panel2">
				<img src="img/image2.jpg" alt="Image 2">
				<p>Radiation from hot stars off the top of the picture illuminates and erodes this giant, gaseous pillar.</p>
			</div>
			<div id="panel3">
				<img src="img/image3.jpg" alt="Image 3">
				<p>V838 Mon is located about 20,000 light-years away from Earth at the outer edge of the Milky Way.</p>
			</div>
			<div id="panel4">
				<img src="img/image4.jpg" alt="Image 4">
				<p>The Sombrero Galaxy is an unbarred spiral galaxy in the constellation Virgo approximately 30 million lights years away.</p>
			</div>
			<div id="panel5">
				<img src="img/image5.jpg" alt="Image 5">
				<p>This region of active current star formation is part of a diffuse emission nebula about 6,500 light-years away.</p>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
(function($){
	//object containing margin settings
	var margins = {
		panel1: 0,
		panel2: -500,
		panel3: -1000,
		panel4: -1500,
		panel5: -2000
	}
	//handle nav click
	$("#nav a").click(function(e){
		//stop browser default
		e.preventDefault();
		//remove on states for all nav links
		$("#nav a").removeClass("on");
		//add on state to selected nav link
		$(this).addClass("on");
		//set margin of slider to move
		$("#slider").animate({
			marginLeft: margins[$(this).attr("href").split("#")[1]]
		});					
	});
	//hide descriptive text
	$("#slider p").hide();
	//show descriptive text on mouseover (hide on mouseout)
	$("#slider img").hover(
		function() {
			$(this).next().slideDown();
		}, function() {
			$(this).next().slideUp();
	});
})(jQuery);
</script>



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動選項卡 滑動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表