<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gbk">
<title>自动轮播图</title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script><!--引用jq1.4.2-->
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script><!--需要引用jquery.SuperSlide.2.1.1.js-->
<style>
.dpcphdp{position: relative;overflow: hidden;width: 100%;margin-top: 10px;float: left;}
.dpcphdp .bigImg{width:290px;height: 310px;position: relative;width: 100%;float: left;}
.dpcphdp .bigImg li img{vertical-align:middle;width:290px;height:310px;}
.dpcphdp .smallScroll{width: 100%;float: left;height: 47px;margin-top: 6px;position: relative;}
.dpcphdp .sPrev{position: absolute;left: 0;top: 0;display: block;width: 14px;height: 47px;text-indent: -9999px;background: url(../images/sprites1008.png) no-repeat 0 -0px;}
.dpcphdp .sNext{position: absolute;right: 0;top: 0;display: block;width: 14px;height: 47px;text-indent: -9999px;background: url(../images/sprites1008.png) no-repeat -14px 0;}
.dpcphdp .smallImg{float:left;margin: 0 18px;display:inline;width: 254px;overflow: hidden;}
.dpcphdp .smallImg ul{height:48px;width: 9999px;overflow: hidden;}
.dpcphdp .smallImg li{float: left;padding: 0 4px 0 0;width:60px;cursor:pointer;display: inline;}
.dpcphdp .smallImg img{border: 1px solid #dcdddd;width:58px;height:45px;}
.dpcphdp .smallImg .on img{border-color: #1e50a2;}
</style>
</head>
<body>
<div class="dpcphdp">
<ul class="bigImg">
<li><a href="#"><img src="meinv.png" /></a></li>
<li><a href="#"><img src="44.jpg" /></a></li>
<li><a href="#"><img src="video.png" /></a></li>
<li><a href="#"><img src="meinv.png" /></a></li>
<li><a href="#"><img src="images/caipin.jpg" /></a></li>
<li><a href="#"><img src="images/caipin.jpg" /></a></li>
<li><a href="#"><img src="images/caipin.jpg" /></a></li>
<li><a href="#"><img src="images/caipin.jpg" /></a></li>
</ul>
<div class="smallScroll">
<a class="sPrev" href="javascript:void(0)">←</a>
<div class="smallImg">
<ul>
<li><a><img src="meinv.png" /></a></li>
<li><a><img src="44.jpg" /></a></li>
<li><a><img src="video.png" /></a></li>
<li><a><img src="meinv.png" /></a></li>
<li><a><img src="images/caipin.jpg" /></a></li>
<li><a><img src="images/caipin.jpg" /></a></li>
<li><a><img src="images/caipin.jpg" /></a></li>
<li><a><img src="images/caipin.jpg" /></a></li>
</ul>
</div>
<a class="sNext" href="javascript:void(0)">→</a>
</div>
</div>
<script type="text/javascript">
//大图切换
jQuery(".dpcphdp").slide({ titCell:".smallImg li", mainCell:".bigImg", effect:"fold", autoPlay:true,delayTime:200,
startFun:function(i,p){
//控制小图自动翻页
if(i==0){ jQuery(".dpcphdp .sPrev").click() } else if( i%4==0 ){ jQuery(".dpcphdp .sNext").click()}
}
});
//小图左滚动切换
jQuery(".dpcphdp .smallScroll").slide({ mainCell:"ul",delayTime:100,vis:4,scroll:4,effect:"left",autoPage:true,prevCell:".sPrev",nextCell:".sNext",pnLoop:false });
</script>
</div>
</body>
</html>
<html>
<head lang="en">
<meta charset="gbk">
<title>自动轮播图</title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script><!--引用jq1.4.2-->
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script><!--需要引用jquery.SuperSlide.2.1.1.js-->
<style>
.dpcphdp{position: relative;overflow: hidden;width: 100%;margin-top: 10px;float: left;}
.dpcphdp .bigImg{width:290px;height: 310px;position: relative;width: 100%;float: left;}
.dpcphdp .bigImg li img{vertical-align:middle;width:290px;height:310px;}
.dpcphdp .smallScroll{width: 100%;float: left;height: 47px;margin-top: 6px;position: relative;}
.dpcphdp .sPrev{position: absolute;left: 0;top: 0;display: block;width: 14px;height: 47px;text-indent: -9999px;background: url(../images/sprites1008.png) no-repeat 0 -0px;}
.dpcphdp .sNext{position: absolute;right: 0;top: 0;display: block;width: 14px;height: 47px;text-indent: -9999px;background: url(../images/sprites1008.png) no-repeat -14px 0;}
.dpcphdp .smallImg{float:left;margin: 0 18px;display:inline;width: 254px;overflow: hidden;}
.dpcphdp .smallImg ul{height:48px;width: 9999px;overflow: hidden;}
.dpcphdp .smallImg li{float: left;padding: 0 4px 0 0;width:60px;cursor:pointer;display: inline;}
.dpcphdp .smallImg img{border: 1px solid #dcdddd;width:58px;height:45px;}
.dpcphdp .smallImg .on img{border-color: #1e50a2;}
</style>
</head>
<body>
<div class="dpcphdp">
<ul class="bigImg">
<li><a href="#"><img src="meinv.png" /></a></li>
<li><a href="#"><img src="44.jpg" /></a></li>
<li><a href="#"><img src="video.png" /></a></li>
<li><a href="#"><img src="meinv.png" /></a></li>
<li><a href="#"><img src="images/caipin.jpg" /></a></li>
<li><a href="#"><img src="images/caipin.jpg" /></a></li>
<li><a href="#"><img src="images/caipin.jpg" /></a></li>
<li><a href="#"><img src="images/caipin.jpg" /></a></li>
</ul>
<div class="smallScroll">
<a class="sPrev" href="javascript:void(0)">←</a>
<div class="smallImg">
<ul>
<li><a><img src="meinv.png" /></a></li>
<li><a><img src="44.jpg" /></a></li>
<li><a><img src="video.png" /></a></li>
<li><a><img src="meinv.png" /></a></li>
<li><a><img src="images/caipin.jpg" /></a></li>
<li><a><img src="images/caipin.jpg" /></a></li>
<li><a><img src="images/caipin.jpg" /></a></li>
<li><a><img src="images/caipin.jpg" /></a></li>
</ul>
</div>
<a class="sNext" href="javascript:void(0)">→</a>
</div>
</div>
<script type="text/javascript">
//大图切换
jQuery(".dpcphdp").slide({ titCell:".smallImg li", mainCell:".bigImg", effect:"fold", autoPlay:true,delayTime:200,
startFun:function(i,p){
//控制小图自动翻页
if(i==0){ jQuery(".dpcphdp .sPrev").click() } else if( i%4==0 ){ jQuery(".dpcphdp .sNext").click()}
}
});
//小图左滚动切换
jQuery(".dpcphdp .smallScroll").slide({ mainCell:"ul",delayTime:100,vis:4,scroll:4,effect:"left",autoPage:true,prevCell:".sPrev",nextCell:".sNext",pnLoop:false });
</script>
</div>
</body>
</html>
6640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
