（1）商城主图：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script> <style type="text/css"> /* css 重置 */ *{margin:0; padding:0; list-style:none; } .box{ width: 322px; height: auto; padding: 10px; box-sizing: border-box; border: 1px solid #E6E6E6; position: relative; } .box_child1>li{ display: inline-block; } .box_child1>li>a>img{ width: 300px; height: 300px; } .left_button,.right_button{ width: 14px; height: 47px; float: left; background: url(img/sprites1008.png) no-repeat 0 -3046px; } .right_button { background-position: 0 -2698px; } .box_child2{ height: 47px; } /*小图片盒子*/ .box_child2_child{ width: 272px; display: inline; overflow: hidden; float: left; } .left_button:hover{ background-position: 0 -3133px; } .right_button:hover{ background-position: 0 -2785px; } .box_child2_child>ul{ width: 9999px; height: 47px; overflow: hidden; } .box_child2_child li{ width: 47px; margin-left: 6.16px; float: left; } .box_child2_child>ul>li>a{ width: 47px; height: 47px; } /*注意这里一定要这样写，而不能像box_child2_child>ul>li>a>img这样写无效*/ .box_child2_child img{ width: 47px; height: 47px; box-sizing: border-box; } .box_child2_child .on img{ border: 1px solid blue; } </style> </head> <body> <div class="box"> <ul class="box_child1"> <li> <a href="#"> <img src="img/ying.jpg" /> </a> </li> <li> <a href="#"> <img src="img/ying2.jpg" /> </a> </li> <li> <a href="#"> <img src="img/ying3.jpg" /> </a> </li> <li> <a href="#"> <img src="img/ying4.jpg" /> </a> </li> <li> <a href="#"> <img src="img/ying5.jpg" /> </a> </li> <li> <a href="#"> <img src="img/ying6.jpg" /> </a> </li> </ul> <div class="box_child2"> <a class="left_button" href="javascript:void(0)"></a> <div class="box_child2_child"> <ul> <li> <a> <img src="img/ying.jpg" /> </a> </li> <li> <a> <img src="img/ying2.jpg" /> </a> </li> <li> <a> <img src="img/ying3.jpg" /> </a> </li> <li> <a> <img src="img/ying4.jpg" /> </a> </li> <li> <a> <img src="img/ying5.jpg" /> </a> </li> <li> <a> <img src="img/ying6.jpg" /> </a> </li> </ul> </div> <a class="right_button" href="javascript:void(0)"></a> </div> </div> </body> <script type="text/javascript"> // 第一个参数是小图的li标签，第二个则是大图的ul标签 jQuery(".box").slide({ titCell:".box_child2_child>ul>li", mainCell:".box_child1", effect:"fold", autoPlay:true,delayTime:200, startFun:function(i,p){ if(i==0){ jQuery(".left_button").click() } else if( i%5==0 ){ jQuery(".right_button").click()} } }); jQuery(".box_child2").slide({ mainCell:"ul",delayTime:200,vis:5,scroll:5,effect:"left",autoPage:true,prevCell:".left_button",nextCell:".right_button",pnLoop:false }); </script> </html>