js简单双行图片轮播

//jap代码   图片部分自己换

<div class="scroll">
    <div class="picbox">
        <ul class="piclist mainlist">
            <li class="goodlist">
                <a href="#" class="pics">1<img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics">2<img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics">3<img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics"><img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics">5<img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics">6<img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics">7<img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics"><img src="images/shop-prati1.png" class="pics" /></a>
            </li>
        </ul>
         <ul class="piclist mainlist">
            <li class="goodlist">
                <a href="#" class="pics"><img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics"><img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics"><img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics"><img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics"><img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics"><img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics"><img src="images/shop-prati1.png" class="pics" /></a>
            </li>
            <li class="goodlist">
                <a href="#" class="pics"><img src="images/shop-prati1.png" class="pics" /></a>
            </li>
        </ul>
    </div>
    <div class="og_prev"></div>
    <div class="og_next"></div>
</div>

//css

*{margin:0;padding:0;list-style:none;}
a,img{border:0;text-decoration:none;}

.scroll{width:912px;position:relative;overflow:hidden;background:#F1EEEB;}
.picbox{width:912px;height:490px;background:#fff;position:relative;}

//按钮  可以自己随意设置
.og_prev, .og_next{width:30px;height:60px;background:url(../../images/btn2.png) ;position:absolute;top:218px;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{width:228px;padding:0 0 10px 0;float:left;position:relative;left:5px;top:10px;}
.goodlist .pics img{width:219px;height:230px;float:left;}
.picbox ul{float:left;height:490px;padding-top:5px;width:912px;}

//js

<script type="text/javascript">
$(function(){
    linum = $(".mainlist li").length;//图片数量
    var page=Math.ceil(linum/8);
    var down=0;
    var up=page;
    w = page * 918;//ul宽度
    $(".picbox").css("width", w + "px");//ul宽度
    
    $(".og_next").click(function(){
         down++
         if(down<page){
             $(".picbox ").animate({
                    left:"-=912px"  
                },600);
         }else if(down==page){
             $(".picbox ").animate({
                    left:"+="+(page-1)*912+"px"  
                },100);
                down=0;
         }
    });
    $(".og_prev").click(function(){
        if(down>0){
        $(".picbox ").animate({
                    left:"+=912px"  
                },600);
                down--
        }else if(down==0){
            $(".picbox ").animate({
                    left:"-="+(page-1)*912+"px"  
                },100);
                down=page-1;
        }
    });
});
</script>