Jquery图片左右滚动

发布时间：2020-06-06 07:50:27 阅读：1386 作者：涂根华栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

源码：

<!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

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

Jquery图片左右滚动

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签