jQuery 封装插件 轮播图 自定义每张图停留时间 完整代码
时间: 2023-05-30 07:02:11 浏览: 85
以下是一个简单的 jQuery 封装插件轮播图的完整代码,可以自定义每张图片的停留时间:
HTML:
```
<div class="slider">
<div class="slider-wrapper">
<img src="img/img1.jpg" alt="image1">
<img src="img/img2.jpg" alt="image2">
<img src="img/img3.jpg" alt="image3">
</div>
</div>
```
CSS:
```
.slider {
width: 100%;
overflow: hidden;
position: relative;
}
.slider-wrapper {
width: 300%;
position: relative;
left: 0;
transition: left 0.5s;
}
.slider-wrapper img {
width: 33.33%;
float: left;
}
.slider .slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background-color: #000;
color: #fff;
text-align: center;
font-size: 20px;
line-height: 30px;
cursor: pointer;
border-radius: 50%;
z-index: 1;
}
.slider .slider-btn.left {
left: 20px;
}
.slider .slider-btn.right {
right: 20px;
}
```
JavaScript:
```
(function($) {
$.fn.slider = function(options) {
var settings = $.extend({
delay: 3000
}, options);
var slider = this;
var wrapper = slider.find('.slider-wrapper');
var images = wrapper.find('img');
var numImages = images.length;
var imageWidth = 100 / numImages;
var currentImage = 1;
var interval;
function init() {
wrapper.css('width', numImages * 100 + '%');
images.css('width', imageWidth + '%');
slider.append('<div class="slider-btn left">‹</div><div class="slider-btn right">›</div>');
slider.find('.slider-btn').on('click', function() {
var direction = $(this).hasClass('left') ? -1 : 1;
changeImage(currentImage + direction);
});
startSlider();
}
function startSlider() {
interval = setInterval(function() {
changeImage(currentImage + 1);
}, settings.delay);
}
function stopSlider() {
clearInterval(interval);
}
function changeImage(index) {
if (index < 1) {
index = numImages;
} else if (index > numImages) {
index = 1;
}
var left = (index - 1) * -100 / numImages;
wrapper.css('left', left + '%');
currentImage = index;
}
init();
slider.hover(function() {
stopSlider();
}, function() {
startSlider();
});
};
}(jQuery));
$('.slider').slider({
delay: 4000
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)