CSS代码（参考）

<style>
*{padding:0; margin:0}
li{list-style:none; padding:0; margin:0}
.g1,.g2,.g3,.g4{width:380px; height:180px; float:left; margin:0 5px 5px 10px}
</style>

JS代码（核心）

<script src="http://www.xcsoft.cn/Public/js/jquery.js"></script><!--引入Jquery-->
<script src="http://www.xcsoft.cn/Public/js/jquery.imgscroll.min.js?v=2014102202"></script><!--引入图片循环滚动js-->
<script>
$(function(){
    imgScroll.rolling({
        name:'g1',
        width:'380px',
        height:'180px',
        direction:'top',
        speed:10,
        addcss:true
        })
})
</script>

HTML代码（标准示例）

<div class="g1">
  <ul>
    <li><img src="http://www.xcsoft.cn/Public/images/img/1.jpg"></li>
    <li><img src="http://www.xcsoft.cn/Public/images/img/2.jpg"></li>
    <li><img src="http://www.xcsoft.cn/Public/images/img/3.jpg"></li>
    <li><img src="http://www.xcsoft.cn/Public/images/img/4.jpg"></li>
    <li><img src="http://www.xcsoft.cn/Public/images/img/5.jpg"></li>
  </ul>
</div>

       代码就写一个例子了，其他的应该可以现学现用吧。

标签   技巧网页制作

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)