jQuery带缩略图轮播效果插件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery带缩略图轮播效果</title>
<style>
body,div,ul,li{margin:0;padding:0}
ul{list-style:none}
img{border:0}
.an_lisbox{width:100%; height: 835px; background: #fff; margin: 0 auto; overflow:hidden; position: relative;}
.large_box{margin-bottom:10px;width:2000px;height:680px; overflow:hidden;}
.large_box img{display:block;position: absolute; left: 50%; margin-left: -1000px;}
.hmal_Gif{width: 578px; height: 335px;position: absolute;left: 50%;margin-left: -548px !important;top: 72px;border-radius: 10px; }
.hmal_m{ width: 216px; height: 216px;position: absolute;left: 50%; margin-left: -90px !important;top: 270px;border-radius: 50%;}
.small_box{width:1200px;height:263px; overflow: hidden; background: #fff; position: absolute; left: 50%; margin-left: -600px; bottom: 0px;}
.small_list{position:relative;width:972px; margin: 0 auto; height:263px;overflow:hidden; position: relative;}
.small_list ul{ width: 1200px; height:263px;overflow:hidden; text-align: center;}
.small_list ul li{ width: 114px; height: 263px; float:left;margin-right:29px;}
.small_list ul li .bun_bg{width: 114px; height: 114px; float: left; border-radius: 50%; margin-top: 40px; overflow: hidden; background: #877a8b;}
.small_list ul li .bun_bg img{display:block; width: 114px; height: 114px;}
.small_list ul li p{ color: #8f8f8f; font-weight: normal;font-size: 24px;line-height: 24px;margin-top: 10px; margin-bottom: 0px}
.small_list ul li p span{color: #8f8f8f; font-weight: normal;font-size: 16px;line-height: 24px;margin-top: 10px; margin-bottom: 0px}
.small_list ul li.on .bun_bg{ background: #aa63f2;}
.small_list ul li.on p{ color: #aa63f2;}
.small_list ul li.on p span{ color: #aa63f2;}
.left_btn{ width: 55px; height: 55px; position: absolute; left: 50%; margin-left: -580px; background:url(../picture/btnl.png) no-repeat; background-color: #d4d4da; border-radius: 50%; bottom: 125px;}
.right_btn{width: 55px; height: 55px;background:url(../picture/btnr.png) no-repeat; background-color: #d4d4da; position: absolute; left: 50%; margin-left: 530px; border-radius: 50%; bottom: 125px;}
.left_btn:hover{ background: url(../picture/btnl.png) no-repeat,#aa63f2; cursor: pointer;}
.right_btn:hover{ background: url(../picture/btnr.png) no-repeat,#aa63f2; cursor: pointer;}
</style>
</head>
<body>
<div class="an_lisbox">
<div class="large_box">
<ul>
<li>
<a href="https://www.tpxhm.com/fdetail/19.html">
<img src="https://www.tpxhm.com/fdetail/yb.jpg" alt="" class="sercerimg">
</a>
</li>
<li>
<a href="https://www.tpxhm.com/fdetail/19.html">
<img src="https://www.tpxhm.com/fdetail/yp.jpg" alt="" class="sercerimg">
</a>
</li>
</ul>
</div>
<div class="small_box">
<div class="small_list">
<ul>
<li class="on">
<div class="bun_bg"><img src="https://www.tpxhm.com/fdetail/ky_41.png" alt=""></div>
<p>1</span></p>
</li>
<li>
<div class="bun_bg"><img src="https://www.tpxhm.com/fdetail/yp_03.png" alt=""></div>
<p>2</p>
</li>
<li>
</ul>
</div>
</div>
<span class="left_btn"></span>
<span class="right_btn"></span>
</div>
<script src="https://www.tpxhm.com/fdetail/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://www.tpxhm.com/fdetail/js/carousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/* 商品轮播图（带缩略图的轮播效果） */
$(".an_lisbox").thumbnailImg({
large_elem: ".large_box",
small_elem: ".small_list",
left_btn: ".left_btn",
right_btn: ".right_btn"
});
});
</script>
</body>
</html>附件：
评论