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

内容如题

<!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方法实现

相关文章:

你感兴趣的文章:

标签云: