hao123头条jQuery焦点图轮播滚动切换特效代码

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

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

以下是 hao123头条jQuery焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="gbk">
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>hao123头条jQuery焦点图</title>
<link href="css/zzsc.css" rel="stylesheet" />

</head>

<body>
<br>
<center>
<div class="section-focus-pic" id="section-focus-pic">
	<div class="pages" data-scro="list" log-type="toppic">
		<ul>
			<li class="item" style="left: 0px;">
			<a href="#" target="_blank" title="天安门广场&quot;史上最大花果篮&quot;竣工">
			<img src="images/1.jpg" width="570" height="300"></a><h3>
			<a href="#" target="_blank" style="color: #FFF; text-decoration:none;">
			天安门广场&quot;史上最大花果篮&quot;竣工</a></h3>
			<div>
			</div>
			</li>
			<li class="item">
			<a href="#" target="_blank" title="广州:10万元得来一座&quot;圆大厦&quot;">
			<img src="images/2.jpg" width="570" height="300"></a><h3>
			<a href="#" target="_blank" style="color: #FFF; text-decoration:none;">
			广州:10万元得来一座&quot;圆大厦&quot;</a></h3>
			<div>
			</div>
			</li>
			<li class="item">
			<a href="#" target="_blank" title="百度视频移动端亿万用户的背后">
			<img src="images/3.jpg" width="570" height="300"></a><h3>
			<a href="#" target="_blank" style="color: #FFF; text-decoration:none;">
			百度视频移动端亿万用户的背后</a></h3>
			<div>
			</div>
			</li>
		</ul>
	</div>
	<div class="controler" data-scro="controler">
		<b class="down">1</b><b>2</b><b>3</b></div>
	<div class="controler2" data-scro="controler2">
		<a href="javascript:;" class="prev"><i></i></a>
		<a href="javascript:;" class="next"><i></i></a></div>
</div></center>
<script type="text/javascript" src="js/jQuery.1.8.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
<br>
</body>
</html>

JS代码(zzsc.js):

/** **���ù������� ** ֧�ֶ�ʱ�Զ��ֲ���ǰ���ֲ�����������ֲ� **/
(function($){
	$("div[data-scro='controler'] b,div[data-scro='controler2'] a").click(function(){
	var T = $(this);
	if(T.attr("class")=="down") return false;
	J2ROLLING_ANIMATION.st({
	findObject:T,//��ǰ������� Ĭ��дmain:T.parent().parent().find("div[data-scro='list']"),//����Ŀ���������ڶ���pagSource:T.parent().parent().find("div[data-scro='controler'] b"),//�л���ť����className:"down",//ѡ�е���ʽduration:"slow",//�����ٶ� ��jquery�ٶ�һ��on:$(this)[0].tagName=="A" ? true:false//�����ж��Ƿ������޹��� or �����л�}
);
	return false;
}
);
	var J2SETTIME="",J2Time=true,J2ROLLING_ANIMATION ={
	init:function(){
	this.start();
	this.time();
}
,st:function(o){
	if(J2Time){
	this.animate(o.findObject,o.main,o.className,o.duration,o.pagSource,o.on);
	J2Time = false;
}
}
,animate:function(T,M,C,S,P,O){
	var _prevDown = O ? P.parent().find("*[class='"+C+"']"):T.parent().find(T[0].tagName+"[class='"+C+"']"),_prevIndex = _prevDown.index(),_thisIndex = O ? (T.attr("class")=="next" ? _prevIndex+1:_prevIndex-1):T.index(),_list = M.find(".item"),p2n = 1;
	_prevDown.removeClass(C);
	if(O){
	if(_thisIndex==-1) _thisIndex=_list.size()-1;
	if(_thisIndex==_list.size()) _thisIndex=0;
	P.eq(_thisIndex).addClass(C);
}
else{
	T.addClass(C);
}
if(T.attr("class")=="prev" || _thisIndex<_prevIndex) p2n = false;
	if((T.attr("class")=="next" || _thisIndex>_prevIndex)&&T.attr("class")!="prev") p2n = true;
	!p2n ? _list.eq(_thisIndex).css("left",-M.width()):'';
	_list.eq(_prevIndex).animate({
	left:p2n ? -M.width():M.width()}
,S,function(){
	$(this).removeAttr("style");
	J2Time = true;
}
);
	_list.eq(_thisIndex).animate({
	left:"0px"}
,S);
}
,start:function(){
	$("#section-focus-pic div[data-scro='controler'] b,#section-focus-pic div[data-scro='controler2'] a").mouseover(function(){
	window.clearInterval(J2SETTIME);
}
).mouseout(function(){
	J2ROLLING_ANIMATION.time();
}
);
}
,time:function(){
	J2SETTIME = window.setInterval(function(){
	var num = $("#section-focus-pic div[data-scro='controler'] b[class='down']").index(),_list = $("#section-focus-pic div[data-scro='list'] li");
	_list.eq(num).animate({
	"left":-$("#section-focus-pic div[data-scro='list']").width()}
,"slow",function(){
	$(this).removeAttr("style");
	$("#section-focus-pic div[data-scro='controler'] b").removeClass("down").eq(num).addClass("down");
}
);
	num++;
	if(num==_list.size()){
	num=0;
}
_list.eq(num).animate({
	"left":"0px"}
,"slow");
}
,4000);
}
}
;
	$("a").click(function(){
	$(this).blur();
}
);
	J2ROLLING_ANIMATION.init();
	//�Ƿ����Զ��ֲ�}
)(this.jQuery || this.baidu);

CSS代码(zzsc.css):

@charset "utf-8";/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-weight:inherit;font-size:100%;line-height:1.2;margin:0;}
legend{color:#000;}
a img,img{-ms-interpolation-mode:bicubic;}
body{font:12px/1.5 arial,SimSun,helvetica,sans-serif;background:#FFF;color:#666;}
.clearfix:after{clear:both;content:".";display:block;height:0;line-height:0;visibility:hidden;}
.clearfix{zoom:1;}
.inlblo{display:inline-block;diplay:inline;zoom:1;}
.section-focus-pic{margin:8px 0 0 0;height:300px;width:570px;overflow:hidden;position:relative;}
.section-focus-pic ul li{position:absolute;top:0;left:570px;width:570px;height:300px;}
.section-focus-pic ul li h3{position:absolute;bottom:11px;left:0;width:400px;font-weight:normal;color:#FFF;margin-left:20px;z-index:111;font-size:18px;font-family:"微软雅黑";}
.section-focus-pic ul li div{position:absolute;bottom:0;left:0;height:50px;background-color:#000;width:570px;opacity:0.6;filter:alpha(opacity=60);}
.section-focus-pic .pages{width:570px;height:300px;}
.section-focus-pic .controler{position:absolute;bottom:20px;right:20px;}
.section-focus-pic .controler b{cursor:pointer;width:20px;height:10px;display:block;overflow:hidden;text-indent:20px;background:url(imgs/news_index_icon.png) no-repeat -136px 3px;float:left;margin:0 0 0 5px;}
.section-focus-pic .controler b.down{background-position:-161px 1px;}
.section-focus-pic .controler2 a{display:block;width:40px;position:absolute;top:120px;height:40px;}
.section-focus-pic .controler2 a i{cursor:pointer;display:block;width:22px;height:34px;background:url(imgs/star.png) no-repeat;}
.section-focus-pic .controler2 .prev{left:5px;}
.section-focus-pic .controler2 .prev i{background-position:-34px -68px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/star_05.png');margin-left:5px;}
.section-focus-pic .controler2 .prev:hover i{left:10px;background-position:-34px -24px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/star_03.png');}
.section-focus-pic .controler2 .next{right:10px;}
.section-focus-pic .controler2 .next i{background-position:-62px -68px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/star_06.png');margin-left:10px;}
.section-focus-pic .controler2 .next:hover i{right:10px;background-position:-62px -24px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/star_04.png');}

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