（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>
扫一扫
2258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
