先上效果：

為什麼效果圖沒辦法釋出？

多圖片輪播

html程式碼：

<div class="showCountyHallLowerPhoto">
<div class="basicStyles">現場照片</div>
<!-- 左邊尖括號圖片 -->
<a class="leftImage">
<img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/left.png"/>
</a>
<!-- 輪播的圖片 -->
<div class="box" style="display:inline-block;">
        <ul class="picBox">
            <li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/1.jpg"/></li>
            <li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/2.jpg"/></li>
            <li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/3.jpg"/></li>
            <li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/4.png"/></li>
            <li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/5.jpeg"/></li>
            <li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/6.png"/></li>
            <li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/7.jpg"/></li>
            <li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/8.jpg"/></li>
        </ul>
    </div>
     <!-- 右邊尖括號圖片 -->
<a class="rightImage">
<img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/right.png"/>
</a>
</div>

css程式碼：

/*輪播圖style*/
.box{
    width:1000px;
    height:150px;
    margin:20px auto;
    overflow:hidden;
    position:relative;
    }
.picBox{
position:absolute;
    margin:0px;
    padding:0px;
    list-style:none;
    width:2000px;}<!--此處很關鍵，在實現無疑輪播時這個寬度一定要比顯示圖片數量+1的寬度寬-->
.picBox:hover{
    cursor:pointer;
    }
.picBox li{
    float:left;
    }
.picBox img{
    width:200px;
    height:150px;
    }




.leftImage img,.rightImage img{
     padding:80px 40px;
}

js程式碼：

// <!--第一種圖片輪播：非無縫輪播-->
    function rollOne(){
        $(".picBox").animate({right:"0"},"linear",function(){
        var  litag=$(this).find('li:last').remove().clone(true)
            $(this).find('li:first').before(litag).fadeIn("slow");   
        });    
    }
    function rollRight(){
        $(".picBox").animate({left:"0"},"linear",function(){
            $(this).find('li:first').remove().clone(true).appendTo(".picBox").fadeIn("slow");   
        });    
    }
    
    var startRollOne=setInterval(rollRight,1000);
    //<!--滑鼠移入停止移出繼續-->
    $(".box").hover(function(){
        clearInterval(startRollOne);   
    },function(){
        startRollOne=setInterval(rollRight,1000);
    });
    
    $(".leftImage,.rightImage").hover(function(){
        clearInterval(startRollOne);  
    },function(){
        startRollOne=setInterval(rollRight,1000);
    });
    
    $(".leftImage").click(function(){
      rollOne();
    });
    $(".rightImage").click(function(){
        rollRight();
    });

若有錯誤或者不足之處，歡迎指正