淘宝首页 图片滑动切换效果 基于jQuery的animate方法实现
浏览数：39 /
时间：2015年06月09日
内容如题
<!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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
