以下是 jQuery带左右圆形箭头焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
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/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="banner">
<div class="wrap">
<div class="pan">
<a href="#" title="内容" target="_blank" style="display: inline;"><img src="images/1356346871-5795.jpg" width="1930" height="484" alt="内容"></a>
<a href="#" title="内容" target="_blank" style="display: none;"><img src="images/1344223271-1345.jpg" width="1930" height="484" alt="内容"></a>
<a href="#" title="内容" target="_blank" style="display: none;"><img src="images/1356929611-4791.jpg" width="1930" height="484" alt="内容"></a>
</div>
<a class="arr_l rf png" href="#"></a>
<a class="arr_r rf png" href="#"></a>
<ul class="tab lifl">
<li class="current"><img src="images/1354763246-8284.jpg" width="96" height="61" alt="内容"></li>
<li class=""><img src="images/1344223085-8741.jpg" width="96" height="61" alt="内容"></li>
<li class=""><img src="images/1346731873-7652.jpg" width="96" height="61" alt="内容"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.tools.min.js" type="text/javascript"></script>
<script src="js/zzsc.js" type="text/javascript"></script>
<!--[if lte IE 6]
><script type="text/javascript" src="js/iepng.js"></script>
<![endif]-->
</body>
</html>JS代码(zzsc.js):
$(function(){
$("ul.tab").tabs(".banner .pan > a",{
effect:'fade',rotate:true,tabs:"li"}
).slideshow({
next:".arr_r",prev:".arr_l",autoplay:true,autopause:true,interval:6000}
);
}
)CSS代码(style.css):
.clearfix{zoom:1;}
.clearfix:after{content:'\20';display:block;clear:both;}
.none{display:none;}
*{margin:0;padding:0;-webkit-text-size-adjust:none;word-wrap:break-word;word-break:normal;}
a{text-decoration:none;outline:none;cursor:pointer;color:#646464;}
a:hover,img{border:none;}
html{overflow-x:hidden;background-color:#fff;}
.fl,.fr,.lifl li{float:left;display:inline;}
.wrap{width:1000px;margin:0 auto;}
.banner .wrap{height:484px;position:relative;}
.banner .pan{width:1920px;height:484px;position:absolute;top:0;left:-460px;overflow:hidden;text-align:center;}
.banner .pan img{position:absolute;top:0px;left:0px;}
ul.tab{position:absolute;top:395px;right:20px;z-index:1;cursor:pointer;}
ul.tab li{padding-left:7px;}
ul.tab img,ul.wdl img,.map{border:2px solid #fff;-webkit-box-shadow:0px 0px 3px 1px rgba(6,0,1,0.3);box-shadow:0px 0px 3px 1px rgba(6,0,1,0.3);}
ul.tab li.current img{border:4px solid #ff6d7b;width:92px;height:57px;}
a.arr_l,a.arr_r{background:url(../images/arr.png) no-repeat;width:58px;height:58px;position:absolute;top:197px;z-index:1;}
a.arr_l{left:9px;}
a.arr_r{background-position:right 0;right:9px;}
a.arr_l:hover{background-position:0 bottom;}
a.arr_r:hover{background-position:right bottom;}
分享到QQ
分享到微博
微信扫一扫
