轮播图（1）

先上效果：

为什么效果图没办法发布？

多图片轮播

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();
    });