基于jQuery实现带新闻滚动焦点图切换



95 376 126



特效描述:基于jQuery实现 带新闻滚动 焦点图切换,基于jQuery实现带新闻滚动焦点图切换

代码结构

1. 引入CSS

<link media="all" rel="stylesheet" type="text/css" href="css/web_page.css">
<link media="all" rel="stylesheet" type="text/css" href="css/web_page.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script>

3. HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body oncontextmenu="return false">
<div class="banner">
	<div class="show">
		<ul>
			<li><a href="http://51qianduan.com"><img src="images/banner.jpg" />
			</a></li>
			<li><a href="http://51qianduan.com">
			<img src="images/banner2.jpg" /> </a></li>
			<li><a href="http://51qianduan.com">
			<img src="images/banner3.jpg" /> </a></li>
		</ul>
	</div>
	<div class="png hot">
		<div class="wrapper rel">
			<div class="list">
				<span class="tit">新闻资讯</span>
				<a href="#1" class="prev all_bg" title="http://51qianduan.com">
				</a>
				<a href="#1" class="box_btn all_bg" title="http://51qianduan.com">
				</a>
				<a href="#1" class="next all_bg" title="http://51qianduan.com">
				</a>
				<div>
					<ul>
						<li><a href="http://51qianduan.com" target="_blank">写好网站的描述标签(Description)<em>-- 
						[2013-8-15]</em></a></li>
						<li><a href="http://51qianduan.com" target="_blank">如何优化自己的网站<em>-- 
						[2013-8-15]</em></a></li>
						<li><a href="http://51qianduan.com" target="_blank">ASP 
						行业知识 静态化<em>-- [2009-6-22]</em></a></li>
						<li><a href="http://51qianduan.com" target="_blank">xusoft静态化<em>-- 
						[2013-6-20]</em></a></li>
					</ul>
				</div>
			</div>
			<div class="focus png">
				<a href="#392143" class="on" title="http://51qianduan.com"></a>
				<a href="#391010" title="http://51qianduan.com"></a>
				<a href="#357656" title="http://51qianduan.com"></a></div>
			<div class="clear">
			</div>
		</div>
	</div>
</div>
<div id="qznserverdomain" style="height:0px;">
</div>
<script "type=text/javascript">
$('.boxgrid.slideright').mouseover(function(){
	$(".cover", this).stop().animate({width:'312px'},{queue:false,duration:300});
	$('.boxgrid.slideright').animate({width:'312px'},{queue:false,duration:300});
});
$('.boxgrid.slideright').mouseout(function(){
	$(".cover", this).stop().animate({width:'45px'},{queue:false,duration:300});
	$('.boxgrid.slideright').animate({width:'45px'},{queue:false,duration:300});
});
$(window).scroll(function (){
	var offsetTop = $(window).scrollTop() + 0 +"px";
	$("#Float").animate({top : offsetTop },{ queue:false , duration:500 });
}); 
function Showtit(i) {
	$("#zp"+i).slideDown("fast");
}
function Hiddentit(i) {
	$("#zp"+i).slideUp("fast");
}	
$(function(){
	$('.banner .show ul li:eq(0)').show();
	$(".hot .list div").jCarouselLite({btnNext: ".hot .list .next",btnPrev: ".hot .list .prev",auto:5000,speed:300,vertical:true,visible:1});
	var speed = 10000,iNum = 0;
	for(i=0;i<$('.banner .show ul li').length;i++){
		if(i==0){$('.tab').append('<a href=\"#1\" class=\"on\">1</a>');}
		else{$('.tab').append('<a href=\"#1\">'+(i+1)+'</a>');}
		}
	$('.banner .focus a').bind('click',function(){
			var aIndex = $('.banner .focus a').index(this);
			$('.on').removeClass('on');
			$(this).addClass('on');
			$('.banner .show ul li').fadeOut().eq(aIndex).fadeIn();
			iNum = aIndex;
			})
	var autoPlay = function(){
		iNum++;
		if(iNum == $('.banner .show ul li').length){iNum=0;}
		$('.on').removeClass('on');
		$('.banner .focus  a').eq(iNum).addClass('on');
		$('.banner .show ul li').fadeOut().eq(iNum).fadeIn(1000);		
		};
	var timer = setInterval(autoPlay,speed);
	$('.banner .show,.banner .focus').hover(function(){clearInterval(timer);},function(){timer = setInterval(autoPlay,speed);});
  });//banner轮换效果
	$(".banner .close-btn").bind("click",function(){
		$(".news-show").animate({top:500})
	});
	$(".box_btn").bind("click",function(){
		$(".news-show").animate({top:298});
});
$("#gotop").click(function(){$('body,html').animate({scrollTop:0},500);})
</script>
<div style="text-align:center;clear:both"><br>
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动流动 滚动切换 滑动选项卡切换 flash焦点图 自动滚动图片轮播 选项卡切换 滑动手风琴 焦点图幻灯片 图片切换 图片轮播 文字滚动 全屏焦点图 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到