jquery带按钮图片滚动切换特效代码下载


jquery带按钮图片滚动切换特效代码下载
jquery带按钮图片滚动切换特效代码下载以及带按钮、图片滚动切换等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-jcContact.js"></script>

2. HTML代码

	<!--图片滚动-->
	<div class="zt-wrap">
		<div class="scene-wrap">
			<div class="scene s1"><a href="#"></a></div>
			<div class="scene s2"><a href="#"></a></div>
			<div class="scene s3"><a href="#"></a></div>
			<div class="scene s4"><a href="#"></a></div>
			<div class="scene s5"><a href="#"></a></div>
			<div class="scene s6"><a href="#"></a></div>
			<div class="scene s7">
				<div class="anim-wrap">
					<a href="#"><img src="img/s7-1.png" width="320" height="30" class="img img1"/></a>
					<a href="#"><img src="img/s7-2.png" width="230" height="60" class="img img2"/></a>
					<a href="#"><img src="img/s7-3.png" width="180" height="60" class="img img3"/></a>
					<a href="#"><img src="img/s7-4.png" width="250" height="30" class="img img4"/></a>
					<a href="#"><img src="img/s7-5.png" width="230" height="30" class="img img5"/></a>
				</div>
			</div>
			<div class="scene s8">
				<div class="anim-wrap s8-2"><div class="end"><a href="#"></a></div></div>
			</div>
		</div>
		<div class="but" id="but1"></div>
		<div class="but" id="but2"></div>
	</div>
	<!--浮动层往期回顾-->
	<div id="hk" class="jcContact">
		<div class="jcConraper">
			<a href="#"><img src="img/40365058801413436776_m.png" alt="2014最好的网店项目|2014十大网店项目|优质网店项目推荐|找最好的网店项目 - 小本商机网"></a>
			<a href="#"><img src="img/71078998601411962015_m.png"  alt="创业早报首届送礼活动派奖啦"></a>
			<a href="#"><img src="img/94582646771411711028_m.jpg" alt="2014最好的酒水项目|2014十大酒水项目|优质酒水项目推荐|找最好的酒水项目 - 小本商机网"></a>
			<a href="#"><img src="img/03437871831411008069_m.jpg" alt="时尚靓丽商机,女装财富多多"></a>
		</div>
		<div class="jcConBtn"><span>往期更多</span></div>
	</div>
<!--图片滚动-->
<script type="text/javascript">
$(function(){
	$(".but").css({"-webkit-animation":"twinkling 3s infinite ease-in-out"});
	function init(){
		var h=$(window).height();
		var h2=612;
		if(h>h2){
			var top=(h-h2)/2;
			$(".zt-wrap").css({"margin-top":top+"px"});
		}
		$(".scene").attr({"anim":"stop"});
		img();
	};
	init();
	var tab=0;
	var max=$(".scene").length-1;
	var t=400;
	$("#but2").click(function(){
		if(tab<max){
			$(".scene:eq("+tab+")").animate({"left":"-100%"},t).attr({"anim":"stop"});
			tab++;
			$(".scene:eq("+tab+")").animate({"left":"0px"},t).attr({"anim":"run"});
		}; 
	});
	$("#but1").click(function(){
		if(tab>0){
			$(".scene:eq("+tab+")").animate({"left":"100%"},t).attr({"anim":"stop"});
			tab--;
			$(".scene:eq("+tab+")").animate({"left":"0px"},t).attr({"anim":"run"});
		} 
	});
	function img(){
		var w=$(".anim-wrap").width();
		var h=$(".anim-wrap").height();
		$(".img").each(function(){
			var iw=$(this).attr("width");
			var ih=$(this).attr("height");
			var top=((h-ih)/2)-100;
			var left=(w-iw)/2;
			$(this).css({"left":left+"px","top":top+"px"});
		});
	};
	function img2(){
		var t=1000;
		$(".img1").animate({"top":"40px","left":"220px"},t);
		$(".img2").animate({"top":"220px","left":"5px"},t);
		$(".img3").animate({"top":"190px","left":"595px"},t);
		$(".img4").animate({"top":"350px","left":"5px"},t);
		$(".img5").animate({"top":"335px","left":"550px"},t);
	};
	var a7=setInterval(anim7, 10);
	function anim7(){
		var anim=$(".s7").attr("anim");
		if(anim==='run'){
			img2();
			clearInterval(a7);
		}
	};
	var a8=setInterval(anim8,10);
	function anim8(){
		var anim=$(".s8").attr("anim");
		if(anim==='run'){
			$(".s8-2").animate({"opacity":"1"},2000,function(){
				$(".end").animate({"opacity":"1"},600);
			});
			clearInterval(a8);
		}
	};
})
</script>
<!--往期回顾-->
<script type="text/javascript">
$(function(){
	$(".jcConraper a").each(function(){
		var alt=$(this).find("img").attr("alt");
		var span='<span>'+alt+'</span>';
		$(this).attr("title",alt).append(span);
	});
	$('#hk').jcContact({
		speed:0,
		position:'top',
		posOffsetY : 180,
		btnPosition : 'top',
		btnPosoffsetY : 75,
		float:'right',
		Event : "mouseover"
	});
});
</script>

相关推荐

发表评论

相关文章