jQuery带缩略图轮播效果

2018-11-28 阅读：2561 分类：前端标签：轮播插件

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="">
                    <img src="yb.jpg" alt="" class="sercerimg">
                </a>
            </li>
            <li>
                <a href="">
                <img src="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="ky_41.png" alt=""></div>
                    <p>1</span></p>
                </li>
                <li>
                    <div class="bun_bg"><img src="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="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="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>

附件：

carousel.min.js.txt