Jquery图片左右滚动的实现代码
发布时间：2015-11-18 编辑：jiaochengji.com
本文介绍下，jquery实现的一例图片左右滚动的代码，有需要的朋友参考下。
jquery实现图片的左右滚动。
代码：
<!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>Jquery图片左右滚动-www.jbxue.com</title>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<style>
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,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;}
h1,h2,h3,h4,h5,h6{ 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="images/1-1.jpg" width="100" height="100"/></a></li>
<li><a href="#" target="_blank"><img src="images/1-2.jpg" width="100" height="100"/></a></li>
<li><a href="#" target="_blank"><img src="images/1-3.jpg" width="100" height="100"/></a></li>
<li><a href="#" target="_blank"><img src="images/1-4.jpg" width="100" height="100"/></a></li>
<li><a href="#" target="_blank"><img src="images/1-5.jpg" width="100" height="100"/></a></li>
<li><a href="#" target="_blank"><img src="images/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>
您可能感兴趣的文章：
基于jQuery的图片左右无缝滚动插件
jQuery使用数组编写图片无缝向左滚动
Javascript实现图片上下左右滚动的代码
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Jquery图片左右滚动的实现代码
基于jquery实现点击左右按钮图片横向滚动
jquery实现marquee效果(文字或者图片的水平垂直滚动)
jquery图片滚动（渐隐渐现模糊消失效果）
jQuery+css实现图片滚动效果(附源码)
基于jQuery的左右滚动实现代码
