带新闻滚动jQuery焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是带新闻滚动jQuery焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>带新闻滚动jQuery焦点图</title>
<link media="all" rel="stylesheet" type="text/css" href="css/web_page.css">
<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>
</head>

<body oncontextmenu="return false">

<div class="banner">
	<div class="show">
		<ul>
			<li><a href="#"><img src="images/banner.jpg" />
			</a></li>
			<li><a href="#">
			<img src="images/banner2.jpg" /> </a></li>
			<li><a href="#">
			<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="#">
				</a>
				<a href="#1" class="box_btn all_bg" title="#">
				</a>
				<a href="#1" class="next all_bg" title="#">
				</a>
				<div>
					<ul>
						<li><a href="#" target="_blank">写好网站的描述标签（Description）<em>-- 
						[2013-8-15]</em></a></li>
						<li><a href="#" target="_blank">如何优化自己的网站<em>-- 
						[2013-8-15]</em></a></li>
						<li><a href="#" target="_blank">ASP 
						行业知识 静态化<em>-- [2009-6-22]</em></a></li>
						<li><a href="#" target="_blank">xusoft静态化<em>-- 
						[2013-6-20]</em></a></li>
					</ul>
				</div>
			</div>
			<div class="focus png">
				<a href="#392143" class="on" title="#"></a>
				<a href="#391010" title="#"></a>
				<a href="#357656" title="#"></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>
</body>
</html>

JS代码(g.base.js):

(function($){
	$.extend($.browser,{
	client:function(){
	return{
	width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,bodyWidth:document.body.clientWidth,bodyHeight:document.body.clientHeight}
}
,scroll:function(){
	return{
	width:document.documentElement.scrollWidth,height:document.documentElement.scrollHeight,bodyWidth:document.body.scrollWidth,bodyHeight:document.body.scrollHeight,left:document.documentElement.scrollLeft+document.body.scrollLeft,top:document.documentElement.scrollTop+document.body.scrollTop}
}
,screen:function(){
	return{
	width:window.screen.width,height:window.screen.height}
}
,isIE6:$.browser.msie&&$.browser.version==6,isMinW:function(val){
	return Math.min($.browser.client().bodyWidth,$.browser.client().width)<=val}
,isMinH:function(val){
	return $.browser.client().height<=val}
}
)}
)(jQuery);
	(function($){
	$.fn.hoverForIE6=function(option){
	var s=$.extend({
	current:"hover",delay:10}
,option||{
}
);
	$.each(this,function(){
	var timer1=null,timer2=null,flag=false;
	$(this).bind("mouseover",function(){
	if(flag){
	clearTimeout(timer2)}
else{
	var _this=$(this);
	timer1=setTimeout(function(){
	_this.addClass(s.current);
	flag=true}
,s.delay)}
}
).bind("mouseout",function(){
	if(flag){
	var _this=$(this);
	timer2=setTimeout(function(){
	_this.removeClass(s.current);
	flag=false}
,s.delay)}
else{
	clearTimeout(timer1)}
}
)}
)}
}
)(jQuery);
	(function($){
	$.extend({
	_jsonp:{
	scripts:{
}
,counter:1,charset:"gb2312",head:document.getElementsByTagName("head")[0],name:function(callback){
	var name='_jsonp_'+(new Date).getTime()+'_'+this.counter;
	this.counter++;
	var cb=function(json){
	eval('delete '+name);
	callback(json);
	$._jsonp.head.removeChild($._jsonp.scripts[name]);
	delete $._jsonp.scripts[name]}
;
	eval(name+' = cb');
	return name}
,load:function(url,name){
	var script=document.createElement('script');
	script.type='text/javascript';
	script.charset=this.charset;
	script.src=url;
	this.head.appendChild(script);
	this.scripts[name]=script}
}
,getJSONP:function(url,callback){
	var name=$._jsonp.name(callback);
	var url=url.replace(/{
	callback}
;
	/,name);
	$._jsonp.load(url,name);
	return this}
}
)}
)(jQuery);
	(function(a){
	a.fn.jdTab=function(d,i){
	if(typeof d=="function"){
	i=d;
	d={
}
}
var k=a.extend({
	type:"static",auto:false,source:"data",event:"mouseover",currClass:"curr",tab:".tab",content:".tabcon",itemTag:"li",stay:5000,delay:100,mainTimer:null,subTimer:null,index:0}
,d||{
}
);
	var f=a(this).find(k.tab).eq(0).find(k.itemTag),b=a(this).find(k.content);
	if(f.length!=b.length){
	return false}
var c=k.source.toLowerCase().match(/http:\/\/|\d|\.aspx|\.ascx|\.asp|\.php|\.html\.htm|.shtml|.js|\W/g);
	var j=function(m,l){
	k.subTimer=setTimeout(function(){
	e();
	if(l){
	k.index++;
	if(k.index==f.length){
	k.index=0}
}
else{
	k.index=m}
k.type=(f.eq(k.index).attr(k.source)!=null)?"dynamic":"static";
	h()}
,k.delay)}
;
	var g=function(){
	k.mainTimer=setInterval(function(){
	j(k.index,true)}
,k.stay)}
;
	var h=function(){
	f.eq(k.index).addClass(k.currClass);
	switch(k.type){
	default:case"static":var l="";
	break;
	case"dynamic":var l=(c==null)?f.eq(k.index).attr(k.source):k.source;
	f.eq(k.index).removeAttr(k.source);
	break}
if(i){
	i(l,b.eq(k.index),k.index)}
b.eq(k.index).show()}
;
	var e=function(){
	f.eq(k.index).removeClass(k.currClass);
	b.eq(k.index).hide()}
;
	f.each(function(l){
	a(this).bind(k.event,function(){
	clearTimeout(k.subTimer);
	clearInterval(k.mainTimer);
	j(l,false);
	return false}
).bind("mouseleave",function(){
	if(k.auto){
	g()}
else{
	return}
}
)}
);
	if(k.type=="dynamic"){
	j(k.index,false)}
if(k.auto){
	g()}
}
}
)(jQuery);
	(function(a){
	a.fn.jdSlide=function(k){
	var p=a.extend({
	width:null,height:null,pics:[],index:0,type:"num",current:"curr",delay1:100,delay2:5000}
,k||{
}
);
	var i=this;
	var g,f,d,h=0,e=true,b=true;
	var n=p.pics.length;
	var o=function(){
	var q="<ul style='position:absolute;
	top:0;
	left:0;
	'><li><a href='"+p.pics[0].href+"' target='_blank'><img src='"+p.pics[0].src+"' width='"+p.width+"' height='"+p.height+"' /></a></li></ul>";
	i.css({
	position:"relative"}
).html(q);
	i.find("ul").css({
	width:n*p.width+"px",height:p.height+"px"}
);
	a(function(){
	c()}
)}
;
	o();
	var j=function(){
	var s=[];
	s.push("<div>");
	var r;
	var q;
	for(var t=0;
	t<n;
	t++){
	r=(t==p.index)?p.current:"";
	switch(p.type){
	case"num":q=t+1;
	break;
	case"string":q=p.pics[t].alt;
	break;
	case"image":q="<img src='"+p.pics[t].breviary+"' />";
	default:break}
s.push("<span class='");
	s.push(r);
	s.push("'><a href='");
	s.push(p.pics[t].href);
	s.push("' target='_blank'>");
	s.push(q);
	s.push("</a></span>")}
s.push("</div>");
	i.append(s.join(""));
	var x=[];
	x.push("<div id='goback' class='o-control'><a class='control'></a></div><div id='forward' class='o-control'><a class='control'></a></div>");
	i.append(x.join(""));
	i.find("#goback").bind("mouseover",function(){
	b=false;
	clearTimeout(g);
	clearTimeout(d)}
).bind("click",function(){
	var u=p.index-1;
	if(u<0){
	u=t-1}
;
	l(u)}
).bind("mouseleave",function(){
	b=true;
}
);
	i.find("#forward").bind("mouseover",function(){
	b=false;
	clearTimeout(g);
	clearTimeout(d)}
).bind("click",function(){
	var u=p.index+1;
	l(u)}
).bind("mouseleave",function(){
	b=true;
}
);
	i.find("span").bind("mouseover",function(){
	b=false;
	clearTimeout(g);
	clearTimeout(d);
	var u=i.find("span").index(this);
	if(p.index==u){
	return}
else{
	d=setInterval(function(){
	if(e){
	l(u)}
}
,p.delay1)}
}
).bind("mouseleave",function(){
	b=true;
	clearTimeout(g);
	clearTimeout(d);
	g=setTimeout(function(){
	l(p.index+1,true)}
,p.delay2)}
);
	i.bind("mouseover",function(){
	$("#slide .o-control").show()}
).bind("mouseleave",function(){
	$("#slide .o-control").hide()}
)}
;
	var l=function(r,q){
	if(r==n){
	r=0}
f=setTimeout(function(){
	i.find("span").eq(p.index).removeClass(p.current);
	i.find("span").eq(r).addClass(p.current);
	m(r,q)}
,20)}
;
	var m=function(u,q){
	var s=parseInt(h);
	var v=Math.abs(s+p.index*p.width);
	var t=Math.abs(u-p.index)*p.width;
	var r=Math.ceil((t-v)/4);
	if(v==t){
	clearTimeout(f);
	if(q){
	p.index++;
	if(p.index==n){
	p.index=0}
}
else{
	p.index=u}
e=true;
	if(e&&b){
	clearTimeout(g);
	g=setTimeout(function(){
	l(p.index+1,true)}
,p.delay2)}
}
else{
	if(p.index<u){
	h=s-r;
	i.find("ul").css({
	left:h+"px"}
)}
else{
	h=s+r;
	i.find("ul").css({
	left:h+"px"}
)}
e=false;
	f=setTimeout(function(){
	m(u,q)}
,20)}
}
;
	var c=function(){
	var q=[];
	for(var r=1;
	r<n;
	r++){
	q.push("<li><a href='");
	q.push(p.pics[r].href);
	q.push("' target='_blank'><img src='");
	q.push(p.pics[r].src);
	q.push("' width='");
	q.push(p.width);
	q.push("' height='");
	q.push(p.height);
	q.push("' /></a></li>")}
i.find("ul").append(q.join(""));
	g=setTimeout(function(){
	l(p.index+1,true)}
,p.delay2);
	if(p.type){
	j()}
}
}
}
)(jQuery);

CSS代码(web_page.css):

/* CSS Document */
body{margin-left:0px;margin-top:0px;margin-right:0px;/* [disabled]margin-bottom:0px;.clear_float{height:auto;clear:both;font-size:0;}
*/
}
html,applet,object,iframe,p,sub,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;list-style-type:none;}
strong{font-family:"微软雅黑";font-size:12px;font-weight:bold;text-decoration:none;color:#333;}
strong a{font-family:"微软雅黑";font-size:12px;font-weight:normal;text-decoration:none;color:#333;}
strong a:hover{font-family:"微软雅黑";font-size:12px;font-weight:normal;text-decoration:none;color:#333;}
h1{font-size:12px;font-family:"微软雅黑";color:#E8E8E8;text-decoration:none;margin-left:500px;height:10px;text-align:left;float:left;font-weight:normal;line-height:10px;width:500px;}
h1 a{font-size:12px;font-family:"微软雅黑";color:#E8E8E8;text-decoration:none;height:10px;text-align:left;float:left;font-weight:normal;line-height:10px;margin-right:10px;}
.font_left a{float:left;font-size:14px;color:#666;text-decoration:none;font-family:"微软雅黑";}
.font_left a:hover{float:left;font-size:14px;color:#00A0E9;text-decoration:none;font-family:"微软雅黑";}
.font_right{float:right;font-family:"微软雅黑";font-size:14px;color:#666;text-decoration:none;}
.date{float:right;}
.jz{width:1024px;margin-right:auto;margin-left:auto;overflow:hidden;border-top-width:1px;border-top-style:dotted;border-top-color:#737373;}
.lin22{line-height:22px;text-align:left;padding-right:5px;padding-left:5px;font-family:"微软雅黑";}
.lin22 a{line-height:22px;text-align:left;padding-right:5px;padding-left:5px;font-family:"微软雅黑";color:#333;text-decoration:none;}
table,th,td{margin:0;}
img{margin:0;padding:0;list-style-type:none;border:0}
a img{border:0;}
span{color:#999;text-decoration:none;margin-left:6px;}
A:hover{TEXT-DECORATION:none;font-weight:normal;}
ul,li{margin:0;padding:0;list-style-type:none;}
.banner{position:relative;height:500px;overflow:hidden;width:100%;}
.ny_banner{background-image:url(../images/ny_banner1.jpg);background-position:50% 0px;height:188px;width:100%;margin-top:110px;background-repeat:no-repeat;background-color:#060405;}
.banner .show{width:2500px;position:absolute;left:50%;top:0px;margin-left:-1250px;height:500px;overflow:hidden;}
.banner .show ul{position:relative;height:500px;overflow:hidden;width:2500px;float:left;}
.banner .show ul li{text-align:center;width:2500px;float:left;height:500px;position:absolute;display:none}
.banner .focus{position:absolute;width:120px;padding-left:10px;padding-top:13px;bottom:0px;right:0px;background:url(../images/bor02.png) no-repeat left center;height:29px;}
.banner .focus a{width:14px;height:14px;background:url(../images/ico01.png) no-repeat left -24px;float:left;margin-left:10px;display:inline-block}
.banner .focus a.on{background:url(../images/ico01.png) no-repeat left top}
.all_bg{background-image:url(../images/all_bg.png);background-repeat:no-repeat}
.wrapper{width:1000px;margin:0 auto;}
.hot{width:100%;height:42px;line-height:42px;position:absolute;bottom:0;z-index:2;background-image:url(../images/bg03.png);background-repeat:repeat-x;}
.hot .list{float:left;width:860px;padding-left:10px;height:42px;position:relative;float:left;}
.hot .list .prev{display:block;width:18px;height:15px;position:absolute;background-position:-42px -108px;top:13px;left:80px;}
.hot .list .box_btn{display:block;width:18px;height:15px;position:absolute;background-position:-61px -108px;top:13px;left:99px;}
.hot .list .next{display:block;width:18px;height:15px;position:absolute;background-position:-80px -108px;top:13px;left:118px}
.list_txt{font-size:16px;width:145px;float:left;}
.hot .list span.tit{font-size:12px;width:145px;float:left;color:#151515;}
.hot .list a{color:#000000;font-size:12px;text-decoration:none;}
.hot .list a:hover{color:#0157AD;font-size:12px;text-decoration:none;}
.hot .list div{width:700px;float:left;height:42px;position:relative;overflow:hidden}
.hot .list div ul{width:700px;position:absolute}
.boxgrid{width:45px;height:auto;position:absolute;right:0;top:0;overflow:hidden;z-index:999;margin-top:100px;}
.boxgrid .cover{border:0;width:45px;height:450px;);background-image:url(../images/qim.png);}
.boxgrid .btn{float:left;width:46px;height:126px;}
.boxgrid .cover .cue{width:215px;padding-left:70px;padding-top:100px}
.boxgrid .cover .cue h2{font-family:"微软雅黑";font-size:18px;color:#076F9C;font-weight:100;height:30px;line-height:30px;margin-bottom:5px;}
.boxgrid .cover .cue ul{width:215px;overflow:hidden}
.box_tit{font-family:"微软雅黑";font-size:14px;color:#2BA2DB;text-decoration:none;float:left;line-height:22px;}
.boxgrid .cover .cue ul li.zc_xx{width:60px;}
.boxgrid .cover .cue ul li.zc_xx1 input{border:0;background:none;width:130px;}
.boxgrid .cover .cue ul li.zc_xx1{width:144px;padding-left:5px;}
.boxgrid .cover .cue ul li.zc_xx2{width:144px;padding-left:5px;height:67px;}
.boxgrid .cover .cue ul li{float:left;line-height:24px;margin-bottom:5px;font-family:"微软雅黑";font-size:12px;color:#4C4C4C;height:30px;}

附件:下载该文件资源,减少时间成本(增值服务)