web常用框架集合

来源：互联网发布：js给div点击框编辑：程序博客网时间：2024/04/29 13:25
（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>
0 0