码迷,mamicode.com
首页 > Web开发 > 详细

淘宝首页 图片滑动切换效果 基于jQuery的animate方法实现

时间:2015-02-23 09:42:05      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:jquery   滑动切换效果   图片动画   

内容如题

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
	height:400px;
	width:1250px;	
	/*使用relative,才能使用left、top性质*/
	position:relative;
	top:0px;
	left:0px;
	/*transition:left 0.5s;*/
}
</style>
</head>
<body>
<!--overflow:hidden性质使得超出div宽度的部分隐藏-->
<div id="buju" style="width:250px;height:400px;margin:80px auto;border:2px black solid;overflow:hidden;">
<img id="tt" src="55.png" alt="tupian" title="coocku"/>
<script src="js/jquery-1.6.2.min.js"></script>
<script>
var num = 0;
var x = 0;
$(document).ready(function() {
	
	//setInterval("huadong()",3000);
	huadong();
	
});
window.onfocus = gogo;
function gogo() {
	var st =setInterval(huadong,3000);	
}
function stopgo() {
	clearInterval(st);
		
}
//当网页出去焦点时,需要消掉定时器,因为一旦打开另一个标签页,这个标签页的定时器还在后台进行
window.onblur = stopgo;
function huadong() {
	num++;
	
		if(num<4) {
			$("img").animate({left:"-=250"},500);
			//document.getElementById("tt").style.left =x +"px";
		}
		else {
			$("img").animate({left:0},500);
			//document.getElementById("tt").style.left =0 +"px";
			x =0;
			num =0;	
		}
		x -= 250;
	//	setTimeout("huadong()",3000);
}
</script>
</div>
</body>
</html>


技术分享

淘宝首页 图片滑动切换效果 基于jQuery的animate方法实现

标签:jquery   滑动切换效果   图片动画   

原文地址:http://blog.csdn.net/caicaijingyuan/article/details/43909303

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!