用jQuery实现轮播图效果(自动播放,能手动切换)
时间: 2024-01-28 15:03:32 浏览: 34
好的,下面是一个简单的轮播图实现示例,使用了jQuery:
HTML代码:
```html
<div id="slider">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
</div>
```
CSS代码:
```css
#slider {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
#slider ul {
position: absolute;
left: 0;
top: 0;
width: 300%;
height: 100%;
}
#slider li {
position: relative;
float: left;
width: 33.33333%;
height: 100%;
list-style: none;
}
#slider img {
width: 100%;
height: 100%;
}
```
jQuery代码:
```javascript
$(document).ready(function() {
// 定义变量
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider').width();
var slideHeight = $('#slider').height();
var sliderUlWidth = slideCount * slideWidth;
// 设置轮播图宽度
$('#slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
// 向左移动函数
function moveLeft() {
$('#slider ul').animate({
left: +slideWidth
}, 200, function() {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
// 向右移动函数
function moveRight() {
$('#slider ul').animate({
left: -slideWidth
}, 200, function() {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
// 自动播放
var autoSlide = setInterval(function() {
moveRight();
}, 3000);
// 鼠标移入移出
$('#slider').hover(function() {
clearInterval(autoSlide);
}, function() {
autoSlide = setInterval(function() {
moveRight();
}, 3000);
});
// 左右箭头点击事件
$('#slider .prev').click(function() {
moveLeft();
});
$('#slider .next').click(function() {
moveRight();
});
});
```
其中,`slideCount` 记录了轮播图中图片的数量,`slideWidth` 和 `slideHeight` 分别记录了每张图片的宽度和高度,`sliderUlWidth` 则记录了整个轮播图的宽度(即所有图片宽度的总和)。接着,我们设置了轮播图的宽度为 `sliderUlWidth`,并将最后一张图片移动到第一张图片的前面。然后,我们定义了两个移动函数 `moveLeft()` 和 `moveRight()`,分别用于向左和向右移动轮播图。在自动播放部分,我们使用了 `setInterval()` 函数定时调用 `moveRight()` 函数来实现自动轮播。在鼠标移入移出部分,我们使用了 `hover()` 函数来清除或重新启动自动播放。最后,在左右箭头点击事件中,我们分别调用了 `moveLeft()` 和 `moveRight()` 函数来实现手动切换。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)