今天我們來介紹一下關(guān)于jQuery輪播圖縮略圖的實現(xiàn)，這個功能一般是用于圖片展示或商品展示。
首先，我們需要引入jQuery和輪播插件的js文件和css文件:
<head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="./css/slick.css"> <script src="./js/slick.min.js"></script> </head>
接著，我們需要在HTML中定義輪播圖和縮略圖的結(jié)構(gòu):
<div class="slider"> <div><img src="img/1.jpg" alt=""></div> <div><img src="img/2.jpg" alt=""></div> <div><img src="img/3.jpg" alt=""></div> </div> <div class="thumbs"> <div><img src="img/1.jpg" alt=""></div> <div><img src="img/2.jpg" alt=""></div> <div><img src="img/3.jpg" alt=""></div> </div>
在CSS文件中，我們需要給輪播圖和縮略圖添加樣式:
.slider {
width: 600px;
height: 400px;
margin: 0 auto;
}
.slider div {
height: 400px;
}
.thumbs {
margin-top: 10px;
}
.thumbs div {
display: inline-block;
width: 100px;
height: 67px;
margin-right: 10px;
border: 2px solid #ccc;
overflow: hidden;
}
.thumbs div img {
width: 100%;
height: 100%;
object-fit: cover;
}最后，在jQuery中添加輪播圖和縮略圖的功能:
$('.slider').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
asNavFor: '.thumbs'
});
$('.thumbs').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.slider',
dots: false,
centerMode: true,
focusOnSelect: true
});好了，我們的jQuery輪播圖縮略圖就完成了，現(xiàn)在你可以打開瀏覽器看一下效果了。
上一篇css怎么做熟練