jQuery多块左右轮播滚动切换特效代码焦点图

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

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

以下是 jQuery多块左右轮播滚动切换特效代码焦点图的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 href="css/zzsc.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/zzsc.js" type="text/javascript"></script>
</head>
<body>
<div id="zzsc">
<a class="pre"></a>
<div id="wai_box">
<div class="zzsc_box">
<ul>
<li><a href="#" class="images"><img src="images/1.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/2.jpg" /></a><span class="title">优酷视频</span></li>
<li><a href="#" class="images"><img src="images/3.jpg" /></a><span class="title">1号店面</span></li>
<li><a href="#" class="images"><img src="images/4.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/5.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/6.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/7.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/8.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/9.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/10.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/11.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/12.jpg" /></a><span class="title">标题</span></li>
</ul>
<ul>
<li><a href="#" class="images"><img src="images/5.jpg" /></a><span class="title">土豆网</span></li>
<li><a href="#" class="images"><img src="images/6.jpg" /></a><span class="title">迅雷看看</span></li>
<li><a href="#" class="images"><img src="images/7.jpg" /></a><span class="title">龍将</span></li>
<li><a href="#" class="images"><img src="images/8.jpg" /></a><span class="title">pps</span></li>
<li><a href="#" class="images"><img src="images/9.jpg" /></a><span class="title">秦美人</span></li>
<li><a href="#" class="images"><img src="images/10.jpg" /></a><span class="title">秦美人</span></li>
<li><a href="#" class="images"><img src="images/11.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/12.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/12.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/13.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/14.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/15.jpg" /></a><span class="title">标题</span></li>
</ul>
<ul>
<li><a href="#" class="images"><img src="images/11.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/12.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/13.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/14.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/15.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/16.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/17.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/18.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/19.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/20.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/1.jpg" /></a><span class="title">标题</span></li>
<li><a href="#" class="images"><img src="images/4.jpg" /></a><span class="title">标题</span></li>
</ul>
</div>
</div>
<a class="next"></a>
	<div class="nav">
	<a class="now"></a>
	<a ></a>
	<a ></a>
	</div>
</div>
</body>
</html>

JS代码(zzsc.js):

$(document).ready(function(){
	$("#zzsc").find(".pre").hide();
	//��ʼ��Ϊ��һ��var page=1;
	//��ʼ����ǰ�İ���Ϊ1var $show=$("#zzsc").find(".zzsc_box");
	//�ҵ�ͼƬչʾ����var page_count=$show.find("ul").length;
	var $width_box=$show.parents("#wai_box").width();
	//�ҵ�ͼƬչʾ������Χ��div//��ʾtitle����$show.find("li").hover(function(){
	$(this).find(".title").show();
}
,function(){
	$(this).find(".title").hide();
}
)function nav(){
	if(page==1){
	$("#zzsc").find(".pre").hide().siblings(".next").show();
}
else if(page==page_count){
	$("#zzsc").find(".next").hide().siblings(".pre").show();
}
else{
	$("#zzsc").find(".pre").show().siblings(".next").show();
}
}
$("#zzsc").find(".next").click(function(){
	//�����ж�չʾ�����Ƿ��ڶ���if(!$show.is(":animated")){
	$show.animate({
	left:'-='+$width_box}
,"normal");
	page++;
	nav();
	$number=page-1;
	$("#zzsc").find(".nav a:eq("+$number+")").addClass("now").siblings("a").removeClass("now");
	return false;
}
}
)$("#zzsc").find(".pre").click(function(){
	if(!$show.is(":animated")){
	$show.animate({
	left:'+='+$width_box}
,"normal");
	page--;
	nav();
	$number=page-1;
	$("#zzsc").find(".nav a:eq("+$number+")").addClass("now").siblings("a").removeClass("now");
}
return false;
}
)$("#zzsc").find(".nav a").click(function(){
	$index=$(this).index();
	page=$index+1;
	nav();
	$show.animate({
	left:-($width_box*$index)}
,"normal");
	$(this).addClass("now").siblings("a").removeClass("now");
	return false;
}
)}
);

CSS代码(zzsc.css):

@charset "utf-8";body,ul,li{margin:0px;padding:0px;list-style-type:none;}
img{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;}
#zzsc{height:459px;width:992px;margin-right:auto;margin-left:auto;position:relative;background-color:#CCCCCC;margin-top:50px;}
#zzsc .pre{background-image:url(../images/nav.png);background-repeat:no-repeat;background-position:-50px top;display:block;height:47px;width:25px;cursor:pointer;position:absolute;left:-120px;top:182px;}
#zzsc a.pre:hover{background-position:-75px top;}
#zzsc .next{background-image:url(../images/nav.png);background-repeat:no-repeat;background-position:left top;display:block;height:47px;width:25px;cursor:pointer;top:182px;right:-120px;position:absolute;}
#zzsc a.next:hover{background-position:-25px top;}
#zzsc #wai_box{height:459px;width:992px;overflow:hidden;position:relative;}
#zzsc #wai_box .zzsc_box .title{font-family:"微软雅黑";font-size:14px;line-height:30px;color:#FFFFFF;background:rgba(000,000,000,0.5);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#6B000000,endColorstr=#6B000000);display:none;height:30px;position:absolute;bottom:0px;z-index:30;width:248px;text-indent:1em;left:0px;}
#zzsc .zzsc_box{width:2976px;position:absolute;left:0px;top:0px;}
#zzsc .zzsc_box a.img:hover{-moz-opacity:0.9;-khtml-opacity:0.9;Opacity:0.9;Filter:alpha(opacity=90);outline:none;}
#zzsc .zzsc_box .img{display:block;}
#zzsc .zzsc_box ul{float:left;display:block;height:459px;width:992px;}
#zzsc .zzsc_box li{float:left;font-size:0px;line-height:0px;position:relative;}
#zzsc .nav{height:10px;margin-top:20px;width:231px;margin-right:auto;margin-left:auto;}
#zzsc .nav a{background:rgba(100,100,100,0.7);display:block;float:left;height:10px;width:75px;font-size:0px;line-height:0px;margin-right:2px;cursor:pointer;}
#zzsc .nav a:hover{background-color:#F9B766;}
#zzsc .nav .now{background-color:#F9B766;}

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