Jquery图片左右滚动

发布时间：2020-06-06 07:50:27 作者：涂根华
来源：网络阅读：1376
源码：
<!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> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<style> 
/* CSS reset */ 
body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h6,h7,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; font-size:12px; font-family:"宋体";} 
table{ border-collapse:collapse; border-spacing:0;} 
fieldset,img{ border:0; display:block;} 
address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal; font-weight:normal;} 
ol,ul{ list-style:none;} 
caption,th{ text-align:left;} 
h2,h3,h4,h5,h6,h7{ font-size:100%; font-weight:normal;} 
.scroll{ width:300px; height:110px; overflow:hidden; position:relative; margin:100px auto 0; border:1px solid #ccc;} 
.scroll ul{ position:absolute; width:3000px;} 
.scroll li{ float:left; padding:5px 0;} 
</style> 
</head> 
 
<body> 
    <div class="scroll"> 
        <ul> 
            <li><a href="#" target="_blank"><img  src="p_w_picpaths/1-1.jpg" width="100" height="100"/></a></li> 
            <li><a href="#" target="_blank"><img  src="p_w_picpaths/1-2.jpg" width="100" height="100"/></a></li> 
            <li><a href="#" target="_blank"><img  src="p_w_picpaths/1-3.jpg" width="100" height="100"/></a></li> 
            <li><a href="#" target="_blank"><img  src="p_w_picpaths/1-4.jpg" width="100" height="100"/></a></li> 
            <li><a href="#" target="_blank"><img  src="p_w_picpaths/1-5.jpg" width="100" height="100"/></a></li> 
            <li><a href="#" target="_blank"><img  src="p_w_picpaths/1-6.jpg" width="100" height="100"/></a></li> 
        </ul> 
    </div> 
 <script src="scroll.js"></script> 
 <script type="text/javascript"> 
     function AutoPlay(){ 
        var _scroll = $(".scroll ul"); 
        _scroll.animate({marginLeft : "-100px"},1000,function(){ 
            _scroll.css({marginLeft : "0px"}).find("li:first").appendTo(this);   
        });  
    } 
    jQuery(function(){ 
        var t = setInterval(function(){ 
            AutoPlay();  
        },3000); 
        $(".scroll").hover(function(){ 
            clearInterval(t);    
        },function(){ 
            t = setInterval(function(){ 
                AutoPlay();  
            },3000);     
        })   
    })   
 </script> 
</body> 
</html>
附件：http://down.51cto.com/data/2359731
Jquery图片左右滚动

相关阅读
