jquery 写入cookie 过期时间顶部可关闭的广告焦点图代码

jquery 写入cookie 过期时间顶部可关闭的广告焦点图代码

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>

3. HTML代码

<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 src="image/banner16.jpg"></a></li>
			<li><a href="#" target="_blank"><img src="image/banner13.jpg"></a></li>
			<li><a href="#" target="_blank"><img src="image/banner14.jpg"></a></li>
			<li><a href="#" target="_blank"><img src="image/banner12.jpg"></a></li>
			<li><a href="#" target="_blank"><img src="image/banner11.jpg"></a></li>
		</ul>
	</div>
	<a href="javascript:;" class="top_banner_close"><img width="60" height="63" src="image/close.png" /></a>
</div>
<script type="text/javascript">
$(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)
		}
	}
});
</script>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到