jquery和carousel.min.js实现缩略图轮播

喜欢ヅ旅行 2021-06-26 16:06 650阅读 1赞

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>jQuery带缩略图轮播效果</title>
        <link href="~/css/style.css" rel="stylesheet" />
    </head>
    <body style="">
        <div class="banner">
            <div class="large_box">
                <ul>
                    <li style="display: none;">
                        <img src="~/images/img1.jpg" width="530" height="350">
    
                    </li>
                    <li style="display: list-item;">
                        <img src="~/images/img2.jpg" width="530" height="350">
                    </li>
                    <li style="display: none;">
                        <img src="~/images/img3.jpg" width="530" height="350">
                    </li>
                    <li style="display: none;">
                        <img src="~/images/img4.jpg" width="530" height="350">
                    </li>
                    <li style="display: none;">
                        <img src="~/images/img5.jpg" width="530" height="350">
                    </li>
                    <li style="display: none;">
                        <img src="~/images/img6.jpg" width="530" height="350">
                    </li>
                </ul>
            </div>
            <div class="small_box">
                <span class="btn left_btn"></span>
                <div class="small_list">
                    <ul style="width: 720px; margin-left: -120px;">
                        <li class="">
                            <img src="~/images/thum1.jpg" width="110" height="73">
                            <div class="bun_bg"></div>
                        </li>
                        <li class="on">
                            <img src="~/images/thum2.jpg" width="110" height="73">
                            <div class="bun_bg"></div>
                        </li>
                        <li class="">
                            <img src="~/images/thum3.jpg" width="110" height="73">
                            <div class="bun_bg"></div>
                        </li>
                        <li class="">
                            <img src="~/images/thum4.jpg" width="110" height="73">
                            <div class="bun_bg"></div>
                        </li>
                        <li class="">
                            <img src="~/images/thum5.jpg" width="110" height="73">
                            <div class="bun_bg"></div>
                        </li>
                        <li class="">
                            <img src="~/images/thum6.jpg" width="110" height="73">
                            <div class="bun_bg"></div>
                        </li>
                    </ul>
                </div>
                <span class="btn right_btn"></span>
            </div>
        </div>
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/carousel.min.js"></script>
        <script type="text/javascript"> $(function () { /* 商品轮播图（带缩略图的轮播效果） */ $(".banner").thumbnailImg({ large_elem: ".large_box", small_elem: ".small_list", left_btn: ".left_btn", right_btn: ".right_btn" }); }); </script>
    </body>
    </html>

## carousel.min.js ##

## style.css ##

body, div, ul, li { 
        margin: 0;
        padding: 0;
    }
    
    ul { 
        list-style: none;
    }
    
    img { 
        border: 0;
    }
    
    .banner { 
        margin: 200px auto 0;
        width: 530px;
        overflow: hidden;
    }
    
    .large_box { 
        margin-bottom: 10px;
        width: 530px;
        height: 350px;
        overflow: hidden;
    }
    
        .large_box img { 
            display: block;
        }
    
    .small_box { 
        width: 530px;
        height: 73px;
        overflow: hidden;
    }
    
    .small_list { 
        position: relative;
        float: left;
        width: 480px;
        height: 73px;
        overflow: hidden;
    }
    
        .small_list ul { 
            height: 73px;
            overflow: hidden;
        }
    
            .small_list ul li { 
                position: relative;
                float: left;
                margin-right: 10px;
                width: 110px;
            }
    
                .small_list ul li img { 
                    display: block;
                }
    
                .small_list ul li .bun_bg { 
                    display: none;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 110px;
                    height: 73px;
                    background: #000;
                    filter: alpha(opacity=60);
                    -moz-opacity: .6;
                    -khtml-opacity: .6;
                    opacity: .6;
                }
    
                .small_list ul li.on .bun_bg { 
                    display: block;
                }
    
    .btn { 
        display: block;
        width: 20px;
        height: 73px;
        background-color: #777;
        background-repeat: no-repeat;
        background-position: center center;
        cursor: pointer;
    }
    
        .btn:hover { 
            background-color: #e7000e;
        }
    
    .left_btn { 
        float: left;
        margin-right: 10px;
        background-image: url(../images/left_btn.png);
    }
    
    .right_btn { 
        float: right;
        background-image: url(../images/right_btn.png);
    }

## 如图： ##

![在这里插入图片描述][20190904180423740.png]  
![在这里插入图片描述][20190904180440450.png]

[20190904180423740.png]: /images/20210626/13031587063f4d2583155ec08b2eafb8.png
[20190904180440450.png]: /images/20210626/82457030a99148789a8ff8d363e6d29e.png