jquery仿腾讯qq新闻图片带缩略图幻灯片切换特效代码下载


jquery仿腾讯qq新闻图片带缩略图幻灯片切换特效代码下载
jquery仿腾讯qq新闻图片带缩略图幻灯片切换特效代码下载以及仿腾讯qq新闻、图片带缩略图、幻灯片切换等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div id="wrapper">
	<!--滚动看图-->
	<div id="picSlideWrap" class="clearfix">
		<h3 class="titleh3">高清:我国多省遭50年来罕见旱情</h3>
		<h4 class="titleh4">发布时间:2011-05-30 04:43:00  |  <a href="https://www.51qianduan.com/">51前端</a> 来源:中国新闻网</h4>
		<div class="imgnav" id="imgnav"> 
			<div id="img"> 
				<img src="images/100260_1306276811398.jpg" width="780" height="570"/>
				<img src="images/100261_1306276853791.jpg"  width="780" height="570"/>
				<img src="images/100391_4381_1306217104406.jpg" width="780" height="570" />
				<img src="images/bImg.jpg"  width="780" height="570" />
				<img src="images/100260_1306276811398.jpg" width="780" height="570"/>
				<img src="images/100261_1306276853791.jpg"  width="780" height="570"/>
				<img src="images/100391_4381_1306217104406.jpg" width="780" height="570" />
				<img src="images/bImg.jpg"  width="780" height="570" />
				<img src="images/100260_1306276811398.jpg" width="780" height="570"/>
				<img src="images/100261_1306276853791.jpg"  width="780" height="570"/>
				<div id="front" title="上一张"><a href="javaScript:void(0)" class="pngFix"></a></div>
				<div id="next" title="下一张"><a href="javaScript:void(0)" class="pngFix"></a></div>
			</div>
			<div id="content">
				<p>今年以来,湘鄂两地降雨、来水偏少,蓄水不足,出现严重的旱情。在流经湖北石首市、湖南华容县等地的华容河流域1679平方公里范围内,30万群众生产生活用水出现困难。从5月4日开始,湖南华容县和湖北石首市一起“引江济河”,在位于石首市调关镇的华容河与长江交汇处筑堤铺管,通过管道将长江水引进久旱少水的华容河.新华社记者 李尕 摄 </p>
				<p align="right">2011年05月21日08:38新华网</p>
			</div>
			<div id="cbtn">
				<i class="picSildeLeft"><img src="images/ico/picSlideLeft.gif"/></i> 
				<i class="picSildeRight"><img src="images/ico/picSlideRight.gif"/></i> 
				<div id="cSlideUl">
					<ul>
						<li><img src="images/100260_1306276811398.jpg"/><tt></tt></li>
						<li><img src="images/100261_1306276853791.jpg"/><tt></tt></li>
						<li><img src="images/100391_4381_1306217104406.jpg" /><tt></tt></li>
						<li><img src="images/bImg.jpg"/><tt></tt></li>
						<li><img src="images/100260_1306276811398.jpg"/><tt></tt></li>
						<li><img src="images/100261_1306276853791.jpg"/><tt></tt></li>
						<li><img src="images/100391_4381_1306217104406.jpg" /><tt></tt></li>
						<li><img src="images/bImg.jpg"/><tt></tt></li>
						<li><img src="images/100260_1306276811398.jpg"/><tt></tt></li>
						<li><img src="images/100261_1306276853791.jpg"/><tt></tt></li>
					</ul>
				</div>
			</div>         
		</div>
	</div><!--end滚动看图-->
</div>
<script type="text/javascript">
$(document).ready(function(){                          
	var index=0;
	var length=$("#img img").length;
	var i=1;
	//关键函数:通过控制i ,来显示图片
	function showImg(i){
		$("#img img").eq(i).stop(true,true).fadeIn(800).siblings("img").hide();
		$("#cbtn li").eq(i).addClass("hov").siblings().removeClass("hov");
	}
	function slideNext(){
		if(index >= 0 && index < length-1) {
			++index;
			showImg(index);
		}else{
			if(confirm("已经是最后一张,点击确定重新浏览!")){
				showImg(0);
				index=0;
				aniPx=(length-5)*142+'px'; //所有图片数 - 可见图片数 * 每张的距离 = 最后一张滚动到第一张的距离
				$("#cSlideUl ul").animate({ "left": "+="+aniPx },200);
				i=1;
			}
			return false;
		}
		if(i<0 || i>length-5){
			return false;
		}						  
		$("#cSlideUl ul").animate({ "left": "-=142px" },200)
		i++;
	}
	function slideFront(){
		if(index >= 1 ) {
			--index;
			showImg(index);
		}
		if(i<2 || i>length+5){
			return false;
		}
		$("#cSlideUl ul").animate({ "left": "+=142px" },200)
		i--;
	}
	$("#img img").eq(0).show();
	$("#cbtn li").eq(0).addClass("hov");
	$("#cbtn tt").each(function(e){
		var str=(e+1)+"/"+length;
		$(this).html(str)
	})
	$(".picSildeRight,#next").click(function(){
		slideNext();
	});
	$(".picSildeLeft,#front").click(function(){
		slideFront();
	});
	$("#cbtn li").click(function(){
		index  =  $("#cbtn li").index(this);
		showImg(index);
	});	
	$("#next,#front").hover(function(){
		$(this).children("a").fadeIn();
	},function(){
		$(this).children("a").fadeOut();
	});
});
</script>

相关推荐

发表评论

相关文章