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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

22 84 29



特效描述:带按钮 图片滚动切换。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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 图片头像上传 滚动切换 文件上传 图片滚动 文本框 文字滚动 下拉框 复选 图片文字滚动 单选 全屏滚动 登录框 页面滚动 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动流动 自动滚动图片轮播 切换按钮 form表单

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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