jQ 轮播图

最新推荐文章于 2025-06-13 15:10:57 发布

原创最新推荐文章于 2025-06-13 15:10:57 发布 · 743 阅读

9 ·

CC 4.0 BY-SA版权

本文为艾夏SEO博主原创文章，未经博主允许不得转载。

文章标签：

#javascript #轮播图

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和jQuery实现的图片轮播效果。该轮播具备自动播放、鼠标悬停暂停、数字导航及上下一张按钮等功能。通过定时器控制图片切换，并利用CSS美化界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

#box {
width: 600px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
}

ul {
list-style: none;
}

ul.img li {
width: 600px;
display: none;
}

ul.img li img {
width: 600px;
}

h3 {
text-align: center;
}

ul.num li {
width: 20px;
height: 20px;
background: #666;
line-height: 20px;
text-align: center;
float: left;
border-radius: 10px;
}
</style>
</head>

<body>

<h3>图片轮播</h3>
<div id="box">
<ul class="img">
<li style="display:block;"><img src="images/a.jpg" alt=""></li>
<li><img src="images/b.jpg" alt=""></li>
<li><img src="images/c.jpg" alt=""></li>
<li><img src="images/d.jpg" alt=""></li>
<li><img src="images/e.jpg" alt=""></li>
<li><img src="images/f.jpg" alt=""></li>
</ul>
<ul class="num">
<li style="background:#b61b1f;">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<button class="left">上一张</button>
<button class="right">下一张</button>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
var index = 0; // 当前显示图片的索引值
var len = $('.img>li').length;
var s = null;

// 1.图片和数字一起轮播
function run() {
s = setInterval(function() {
// 1.1 隐藏当前图片，改变当前数字背景色
$('.img>li').eq(index).hide();
$('.num>li').eq(index).css('background', '#ddd');

// 1.2 获取下一张图片的索引
index++;
if (index >= len) {
index = 0;
}

// 1.3 显示下一张图片和改变对应数字背景色
$('.img>li').eq(index).show();
$('.num>li').eq(index).css('background', 'red');
}, 1000)
}
run();

// 2.鼠标移入div#box上
$('#box').mouseover(function() {
clearInterval(s);
}).mouseout(function() {
run();
})

// 3.鼠标移入到数字上
$('.num>li').mouseover(function() {
// 1.1 隐藏当前图片，改变当前数字背景色
$('.img>li').eq(index).hide();
$('.num>li').eq(index).css('background', '#ddd');

// 1.2 获取鼠标移入对应数字的索引值
index = $(this).index();

// 1.3 显示下一张图片和改变对应数字背景色
$('.img>li').eq(index).show();
$('.num>li').eq(index).css('background', 'red');
})

// 4.上一张和下一张
$('.left').click(function() {
// 1.1 隐藏当前图片，改变当前数字背景色
$('.img>li').eq(index).hide();
$('.num>li').eq(index).css('background', '#ddd');

// 1.2 获取下一张图片的索引
index--;
if (index < 0) {
index = len - 1;
}

// 1.3 显示下一张图片和改变对应数字背景色
$('.img>li').eq(index).show();
$('.num>li').eq(index).css('background', 'red');
})

$('.right').click(function() {
// 1.1 隐藏当前图片，改变当前数字背景色
$('.img>li').eq(index).hide();
$('.num>li').eq(index).css('background', '#ddd');

// 1.2 获取下一张图片的索引
index++;
if (index >= len) {
index = 0;
}

// 1.3 显示下一张图片和改变对应数字背景色
$('.img>li').eq(index).show();
$('.num>li').eq(index).css('background', 'red');
})
</script>
</body>

</html>