网站中图片滚动效果的实现方法集锦

.图片滚动效果实现的几种方式

方法1.实现图片的上下，左右单独的方向滚动。

View Code

1 <div class="product"> <img src="images/pic5.jpg" alt="" style="margin:0px 2px 33px 0px;float:left;" onclick="toLeft()"/>
2 <!--#####滚动区域#####-->
3 <div id="scroll_div" class="scroll_div_left">
4 <div id="scroll_begin">
5 <ul>
6 <li><a href="www.feellife.net"><img src="images/product1.jpg" alt="『一网传媒』" /></a></li>
7 <li><a href="www.feellife.net"><img src="images/product2.jpg" alt="『一网传媒』" /></a></li>
8 <li><a href="www.feellife.net"><img src="images/product3.jpg" alt="『一网传媒』" /></a></li>
9 <li><a href="www.feellife.net"><img src="images/product4.jpg" alt="『一网传媒』" /></a></li>
10 </ul>
11 </div>
12 <div id="scroll_end"></div>
13 </div>
14 <!--#####滚动区域#####-->
15 <img src="images/pic6.jpg" onclick="toRight()" style="margin:0 0 33px 5px;" alt=""/></div>

table布局方式源码： demo2.rar

ul，li布局方式源码：demo3.rar

方法4.实现图片的每次一张图片的滚动。

http://www.feelife.net/，单击按钮一次实现一张图片的滚动。利用jqurry实现。

源码：demo4.rar