/*效果图*/

HTML:    <div class="scroll">
       <div class="picbox">
        <ul class="piclist mainlist">
             <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg.jpg" class="pics" /></a>
                         <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg1.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg2.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg3.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg4.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg5.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                    <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
                    
                     <li class="goodlist">
                        <a class="scrolling_picture"><img src="data:images/timg1.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
        </ul>
        <ul class="piclist swaplist"></ul>
    </div>
    <div class="og_prev"></div>
    <div class="og_next"></div>
</div>

CSS:

* {
    margin:0;
    padding:0;
    list-style:none;
}
body {
    font-size:12px;
}
a {
    text-decoration:none;
}
.scroll {
    width:760px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}
.picbox {
    width:730px;
    height:340px;
    background:#fff;
    border:1px solid #DED7D1;
    overflow:hidden;
    position:relative;
    margin:15px;
}
.picbox ul {
    height:285px;
    padding-top:5px;
}
.piclist {
    position:absolute;
    left:0px;
    top:0px;
}
.piclist li.goodlist {
    width:221px;
    margin:10px 0;
    padding:0px 5px;
    margin-right:-1px;
    float:left;
    padding-left: 20px;
}
.piclist li.goodlist img {
    width:100%;
    height:120px;
}
.swaplist {
    position:absolute;
    left:-3000px;
    top:0px;
}
.og_prev, .og_next {
    width:30px;
    height:60px;
    background:url(../images/btn.png) no-repeat;
    position:absolute;
    top:152px;
    z-index:99;
    cursor:pointer;
}
.og_prev {
    background-position:0 0;
    left:0px;
}
.og_prev:hover {
    background-position:0 -60px;
}
.og_next {
    background-position:-30px 0;
    right:0px;
}
.og_next:hover {
    background-position:-30px -60px;
}
.goodlist img.pics {
    width:85px;
    height:135px;
    float:left;
    background:#fff url(../images/loading.gif) center center no-repeat;
}
.title {
    width:100%;
    height:22px;
    line-height:22px;
    display:block;
    color:#363636;
    text-align: center;
    margin-top: 10px;
}
.scrolling_picture{overflow:hidden; display:block;width:90%;}

JS:

$(function(){
    linum = $('.mainlist li').length;//图片数量
    w = linum/2 * 232;//ul宽度
    $('.piclist').css('width', w + 'px');//ul宽度
    $('.swaplist').html($('.mainlist').html());//复制内容
    
    $('.og_next').click(function(){
        
        if($('.swaplist,.mainlist').is(':animated')){
            $('.swaplist,.mainlist').stop(true,true);
        }
        
        if($('.mainlist li').length>4){//多于4张图片
            ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
            sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
            if(ml<=0 && ml>w*-1){//默认图片显示时
                $('.swaplist').css({left: '928px'});//交换图片放在显示区域右侧
                $('.mainlist').animate({left: ml - 928 + 'px'},'slow');//默认图片滚动                
                if(ml==(w-928)*-1){//默认图片最后一屏时
                    $('.swaplist').animate({left: '0px'},'slow');//交换图片滚动
                }
            }else{//交换图片显示时
                $('.mainlist').css({left: '928px'})//默认图片放在显示区域右
                $('.swaplist').animate({left: sl - 928 + 'px'},'slow');//交换图片滚动
                if(sl==(w-928)*-1){//交换图片最后一屏时
                    $('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
                }
            }
        }
    })
    $('.og_prev').click(function(){
        
        if($('.swaplist,.mainlist').is(':animated')){
            $('.swaplist,.mainlist').stop(true,true);
        }
        
        if($('.mainlist li').length>4){
            ml = parseInt($('.mainlist').css('left'));
            sl = parseInt($('.swaplist').css('left'));
            if(ml<=0 && ml>w*-1){
                $('.swaplist').css({left: w * -1 + 'px'});
                $('.mainlist').animate({left: ml + 928 + 'px'},'slow');                
                if(ml==0){
                    $('.swaplist').animate({left: (w - 928) * -1 + 'px'},'slow');
                }
            }else{
                $('.mainlist').css({left: (w - 928) * -1 + 'px'});
                $('.swaplist').animate({left: sl + 928 + 'px'},'slow');
                if(sl==0){
                    $('.mainlist').animate({left: '0px'},'slow');
                }
            }
        }
    });
});