图片无缝滚动插件上下左右图片无缝滚动代码
以上只是部份演示图片，详细可以付费购买。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片无缝滚动插件上下左右图片无缝滚动代码</title>
<meta name="keywords" content="jquery特效、js代码、jquery图片滚动" />
<meta name="description" content="jquery图片无缝滚动插件上下左右图片无缝滚动代码。" />
<style type="text/css">
*{padding:0; margin:0; font-family:"微软雅黑"}
li{list-style:none; padding:0; margin:0}
.mains{width:800px;padding-left:15px;margin:0 auto}
.mains .title{font-size:25px;text-align:center;padding:10px 5px}
.g1,.g2,.g3,.g4{width:380px; height:180px; float:left; margin:0 5px 5px 0}
</style>
<script type="text/javascript" src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/jquery.min.js"></script>
<script type="text/javascript" src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/jquery.imgscroll.min.js"></script>
<script type="text/javascript">
$(function(){
imgScroll.rolling({
name:'g1',
width:'380px',
height:'180px',
direction:'top',
speed:10,
addcss:true
});
imgScroll.rolling({
name:'g2',
width:'380px',
height:'180px',
direction:'left',
speed:20,
addcss:true
});
imgScroll.rolling({
name:'g3',
width:'380px',
height:'180px',
direction:'bottom',
speed:30,
addcss:true
});
imgScroll.rolling({
name:'g4',
width:'380px',
height:'180px',
direction:'right',
speed:40,
addcss:true
});
})
</script>
</head>
<body>
<div class="mains">
<div class="title">Jquery图片无缝连续循环滚动 支持上下左右的滚动</div>
<div class="g1">
<ul>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/1.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/2.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/3.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/4.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/5.jpg"></li>
</ul>
</div>
<div class="g2">
<ul>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/1.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/2.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/3.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/4.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/5.jpg"></li>
</ul>
</div>
<div class="g3">
<ul>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/1.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/2.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/3.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/4.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/5.jpg"></li>
</ul>
</div>
<div class="g4">
<ul>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/1.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/2.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/3.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/4.jpg"></li>
<li><img src="//xcdn.php.cn/js/ads/图片无缝滚动插件上下左右图片无缝滚动代码/img/5.jpg"></li>
</ul>
</div>
</div>
</body>
</html>
以上代码中的图片和JS，请下载到自己网站目录中使用！
这个行，我来试试这个行，我来试试
页:
[1]