//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>
