可关闭的jQuery焦点图特效轮播滚动切换代码

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

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

以下是可关闭的jQuery焦点图特效轮播滚动切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>可关闭的jquery焦点图特效</title>
<link rel="stylesheet" href="css/start_v5.css?v=20140326" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/plugin/jquery.cookie.min.js?v=20140326"></script>
</head>
<body>
	<div id="top_banner">
		<div id="focus">
			<ul>
				<li><a href="#" target="_blank"><img src="image/banner15.jpg"></a></li>
				<li><a href="#" target="_blank"><img class="top_banner_img" src="image/banner16.jpg"></a></li>
				<li><a href="#" target="_blank"><img class="top_banner_img" src="image/banner13.jpg"></a></li>
				<li><a href="#" target="_blank"><img class="top_banner_img" src="image/banner14.jpg"></a></li>
				<li><a href="#" target="_blank"><img class="top_banner_img" src="image/banner12.jpg"></a></li>
				<li><a href="#" target="_blank"><img class="top_banner_img" src="image/banner11.jpg"></a></li>
			</ul>
		</div>
		<a href="javascript:;" class="top_banner_close"><img style="position: absolute;right: 20px;top: 20px;" src="image/start/v3/close.png"></a>
	</div>
	<script type="text/javascript" src="js/page/top_banner_v1.js?v=20140326"></script>
</body>
</html>

JS代码(top_banner_v1.js):

$(function(){
	if($.cookie("weijuju_banner_10")!=1){
	var f=$(window).width()*0.39375;
	$("#online_qq_layer").hide();
	$("#focus").height(f);
	$("#focus ul li").width($(window).width());
	$("#top_banner").show().animate({
	height:f+"px"}
,2000);
	$(".top_banner_close").click(function(){
	$("#top_banner").remove();
	var h=new Date();
	h.setTime(h.getTime()+(12*60*60*1000));
	$.cookie("weijuju_banner_10","1",{
	expires:h}
);
	$("#online_qq_layer").show()}
);
	var j=$("#focus").width();
	var a=$("#focus ul li").length;
	var c=0;
	var g;
	var e="<div class='btnBg'></div><div class='btn'>";
	for(var d=0;
	d<a;
	d++){
	e+="<span></span>"}
e+="</div><div class='preNext pre'></div><div class='preNext next'></div>";
	$("#focus").append(e);
	$("#focus .btnBg").css("opacity",0.5);
	$("#focus .btn span").css("opacity",0.4).mouseover(function(){
	c=$("#focus .btn span").index(this);
	b(c)}
).eq(0).trigger("mouseover");
	$("#focus .preNext").css("opacity",0.2).hover(function(){
	$(this).stop(true,false).animate({
	opacity:"0.5"}
,300)}
,function(){
	$(this).stop(true,false).animate({
	opacity:"0.2"}
,300)}
);
	$("#focus .pre").click(function(){
	c-=1;
	if(c==-1){
	c=a-1}
b(c)}
);
	$("#focus .next").click(function(){
	c+=1;
	if(c==a){
	c=0}
b(c)}
);
	$("#focus ul").css("width",j*(a));
	$("#focus").hover(function(){
	clearInterval(g)}
,function(){
	g=setInterval(function(){
	b(c);
	c++;
	if(c==a){
	c=0}
}
,5000)}
).trigger("mouseleave");
	function b(h){
	var i=-h*j;
	$("#focus ul").stop(true,false).animate({
	left:i}
,300);
	$("#focus .btn span").stop(true,false).animate({
	opacity:"0.4"}
,300).eq(h).stop(true,false).animate({
	opacity:"1"}
,300)}
}
}
);

CSS代码(start_v5.css):

html,body,div,span,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,button{margin:0;padding:0;border:0;font-family:"Microsoft YaHei","微软雅黑","宋体";font-size:12px;line-height:1.5;outline:0;color:#333;}
a{text-decoration:none;color:#444;outline:none;}
a,button{cursor:pointer;}
html,body{overflow:hidden;}
ul{padding:0;margin:0;}
li{list-style:none;}
img{border:0;}
.lt{float:left;}
.rt{float:right;}
.f-cb{zoom:1;}
.fn-clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.fn-clear{zoom:1;}
.loading{position:absolute;top:50%;left:0;z-index:1;width:100%;margin:20px auto;text-align:center;margin-top:-8px;}
.loading .load{background:url(../image/start/v5/load.gif) no-repeat right center;display:block;font-size:22px;line-height:25px;margin:0 auto;width:68px;}
.bgwrap{position:absolute;z-index:2;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.bgwrap #bg{display:none;width:100%;height:auto;}
.wrap .navwrap{display:none;}
.wrap .navwrap .nav{width:14px;height:14px;background:url(../image/start/v5/nav_bg.png) no-repeat scroll;background-position:-13px 0;z-index:900;position:fixed;right:20px;top:50px;cursor:pointer;}
.wrap .navwrap .nav.cur{background-position:1px 0;}
#top_banner{width:100%;height:0;position:relative;z-index:22;display:none;}
#focus{width:100%;overflow:hidden;position:relative;}
#focus ul{position:absolute;}
#focus ul li{float:left;width:50%;height:100%;overflow:hidden;position:relative;background:#000;}
#focus ul li a{display:block;width:100%;height:100%;}
#focus ul li img{display:block;width:100%;}
#focus ul li div{position:absolute;overflow:hidden;}
#focus .btnBg{position:absolute;width:100%;height:20px;left:0;bottom:0;background:#000;}
#focus .btn{position:absolute;width:100%;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}
#focus .btn span.on{background:#fff;}
#focus .preNext{width:45px;height:100px;position:absolute;top:50%;margin-top:-70px;background:url(../image/start/v5/sprite.png) no-repeat 0 0;cursor:pointer;}
#focus .pre{left:0;}
#focus .next{right:0;background-position:right top;}
.city{float:left;margin-right:40px;}
.city h2{float:left;line-height:55px;padding-right:15px;color:#FFF;font-size:16px;font-weight:normal;}
.city a{position:relative;float:left;display:inline-block;margin-top:0;padding-right:12px;height:55px;color:#c0c0c0;text-decoration:none;_margin-top:0;line-height:55px;font-size:13px;}
.city a .tri4{top:25px;right:0;border-top:4px solid #c0c0c0;_top:8px;}
.tri4{position:absolute;width:0;height:0;border:4px dashed transparent;font-size:0;line-height:0;cursor:pointer;}

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