jquery轮播图
时间: 2023-07-05 07:05:01 浏览: 47
以下是一个简单的基于 jQuery 的轮播图实现:
HTML 代码:
```
<div class="slider">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
</div>
```
CSS 代码:
```
.slider {
position: relative;
overflow: hidden;
}
.slider ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.slider ul li {
position: absolute;
top: 0;
left: 0;
}
.slider img {
display: block;
width: 100%;
height: auto;
}
```
JavaScript 代码:
```
$(function() {
var slider = $('.slider'),
sliderUl = slider.find('ul'),
sliderUlLi = sliderUl.find('li'),
sliderOl = slider.find('ol'),
sliderOlLi = sliderOl.find('li'),
sliderOlLiFirst = sliderOlLi.first(),
sliderOlLiLast = sliderOlLi.last(),
sliderWidth = slider.width(),
sliderUlLiLength = sliderUlLi.length,
sliderUlWidth = sliderWidth * sliderUlLiLength,
current = 1,
interval;
sliderUl.css({
width: sliderUlWidth,
marginLeft: -sliderWidth
});
sliderUlLi.first().before(sliderUlLiLast.clone());
sliderUlLi.last().after(sliderUlLiFirst.clone());
function startSlider() {
interval = setInterval(function() {
sliderUl.animate({
left: -current * sliderWidth
}, 500, function() {
current++;
if (current === sliderUlLiLength + 1) {
sliderUl.css({
left: -sliderWidth
});
current = 2;
}
if (current === 0) {
sliderUl.css({
left: -sliderWidth * sliderUlLiLength
});
current = sliderUlLiLength - 1;
}
sliderOlLi.removeClass('active').eq(current - 1).addClass('active');
});
}, 3000);
}
function stopSlider() {
clearInterval(interval);
}
sliderOlLi.on('click', function() {
var $this = $(this),
index = $this.index();
sliderOlLi.removeClass('active');
$this.addClass('active');
sliderUl.animate({
left: -index * sliderWidth
}, 500, function() {
current = index + 1;
});
});
slider.on({
mouseenter: stopSlider,
mouseleave: startSlider
});
startSlider();
});
```
代码中通过 jQuery 操作 DOM 元素,实现了轮播图的自动播放、手动切换、无限循环、自适应宽度等功能。需要注意的是,CSS 中的 `position: absolute` 会使轮播图脱离文档流,需要根据实际情况进行调整。