jquery 輪播圖片

jQuery是一個優秀的JavaScript庫，被廣泛應用于前端開發中。其中，輪播圖是網站構建中比較重要的部分，也是jQuery最常用的功能之一，本文將介紹如何使用jQuery實現一個簡單的輪播圖，并通過實例演示。

首先，我們需要在HTML文件中引入jQuery庫文件：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

接著，在HTML代碼中添加輪播圖的HTML結構：

<div class="slider">
<div class="slider-wrapper">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
</div>
</div>

在CSS中對輪播圖進行樣式設置：

.slider {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
.slider-wrapper {
position: absolute;
width: 1800px;
}

我們需要設置slider的寬高以及overflow:hidden，使得輪播圖只能顯示其中一張圖片。而slider-wrapper是作為容器，用于存放需要輪播的圖片。它的寬度需要設置為所有圖片的寬度之和，以便可以讓圖片水平排列。

接下來，我們可以引入jQuery腳本文件，按如下代碼實現輪播圖效果：

$(document).ready(function(){
var sliderWrapperWidth = $('.slider-wrapper').width();
var currentSlide = 1;
var sliderInterval;
function startSlider() {
sliderInterval = setInterval(function() {
$('.slider-wrapper').animate({
'margin-left': '-=' + sliderWrapperWidth
}, 1000, function() {
currentSlide++;
if (currentSlide === $('.slider-wrapper img').length) {
currentSlide = 1;
$('.slider-wrapper').css('margin-left', 0);
}
});
}, 3000);
}
function stopSlider() {
clearInterval(sliderInterval);
}
$('.slider').on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
});

jQuery腳本中的代碼實現了以下功能：