QQ 1640076782

2012年04月27日

图片不间断滚动效果代码

今天给大家介绍一款图片不间断滚动代码

1.简单的div布局
<div>
<div>
<a href=”javascript:void(0);” >
<img src=”images/pic_left.gif” /></a>
</div>
<div>
<ul>
<li>
<a href=”images/20100202-010211-i70stI.jpg”>
<img src=”images/20100202-010211-i70stI.jpg” />
</a></li>
<li>
<a href=”images/20100202-010213-fvXciI.jpg”>
<img src=”images/20100202-010213-fvXciI.jpg” />
</a></li>
<li>
<a href=”images/20100202-010211-i70stI.jpg”>
<img src=”images/20100202-010211-i70stI.jpg” />
</a></li>
<li>
<a href=”images/20100202-010226-wDSIe4.jpg”>
<img src=”images/20100202-010226-wDSIe4.jpg” />
</a></li>
<li>
<a href=”images/20100202-010240-sS46PQ.jpg”>
<img src=”images/20100202-010240-sS46PQ.jpg” />
</a></li>
<li>
<a href=”images/20100202-010241-2TEzbH.jpg”>
<img src=”images/20100202-010240-sS46PQ.jpg” />
</a></li>
<li>
<a href=”images/20100202-010241-qeMjq0.jpg”>
<img src=”images/20100202-010241-qeMjq0.jpg” />
</a></li>
<li>
<a href=”images/20100202-010241-3zSCtz.jpg”>
<img src=”images/20100202-010241-3zSCtz.jpg” />
</a></li>
<li>
<a href=”images/20100202-010241-hslm1b.jpg”>
<img src=”images/20100202-010241-hslm1b.jpg” />
</a></li>
<li>
<a href=”images/20100202-010241-O9L8rT.jpg”>
<img src=”images/20100202-010241-O9L8rT.jpg” />
</a></li>
</ul>
</div>
<div>
<a href=”javascript:void(0);” >
<img src=”images/pic_right.gif” /></a>
</div>
</div>

2.超少的js

<script type=”text/javascript”>
$(document).ready(function(){
$(“.galleryPics”).jCarouselLite({
btnNext: “.picBtns .nextPic”,
btnPrev: “.picBtns .prevPic”,
auto: 800,
speed: 1000,
visible: 5,
scroll:3
});
});
</script>

3.jquery的调用
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jcarousellite_1.0.1.js”></script>

效果如下:

图片不间断滚动代码演示地址:

http://lijunlin.34804804.com/gundong/

更多js效果未完待续。。。