- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- </head>
- <script src1="jquery-1.11.1.min.js"></script>
- <style type="text/CSS">
- #xxx{ position:relative; width:900px; overflow:hidden}
- #zzz{ width:1800px; position:relative; left:0px;}
- #zzz img{ width:300px; height:300px; background-color:#CCCC00}
- </style>
- <script>
- $(document).ready(function(){
- function aaa(ok){
- if(ok){time=((900+parseFloat($("#zzz").css("left")))/900)*6000}//重新计算滑动时间
- else{$("#zzz").css({"left":'0px'});time=6000;}
- $("#zzz").animate({left:'-900px'},time,function(){aaa();});
- }
- aaa(false);
- $("#xxx").hover(function(){ $("#zzz").stop();},function(){aaa(true)});//鼠标移到图上就停止移到,移开重新计算滑动时间
- });
- </script>
- <body>
- <div id="xxx">
- <div id="zzz">
- <img src1="#" alt="1">
- <img src1="#" alt="2">
- <img src1="#" alt="3">
- <img src1="#" alt="1">
- <img src1="#" alt="2">
- <img src1="#" alt="3">
- </div>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/3112201411440.html
来源: http://www.codesnippet.cn/detail/3112201411440.html