<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/lun.css" rel="stylesheet" />
</head>
<body>
<div class="outer">
<ul class="img">
<li><img src="img/adver01.jpg"></li>
<li><img src="img/adver02.jpg"></li>
<li><img src="img/adver03.jpg"></li>
<li><img src="img/adver04.jpg"></li>
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="btn_left button"> < </div>
<div class="btn_right button"> > </div>
</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
// 全局变量 表示索引位置
let i = 0;
// 初始化 选中第一个小的圆形按钮，让他们的背景设置成橙色，其他的颜色为灰色
$(".num li").first().css("background", "orange").siblings().css("background", "grey");
// 初始化 第一张图片作为大的背景，其他的不显示
$(".img li").first().fadeIn().siblings().fadeOut();
// 函数 用来移动背景
function move() {
i++;
// 如果到头了 i 变回0；
if (i > 3) {
i = 0;
}
//小圆形按钮发生变化
$(".num li").eq(i).css("background", "orange").siblings().css("background", "grey");
// 背景图发生变化
$(".img li").eq(i).fadeIn().siblings().fadeOut();
}
// 通过定时函数轮播自动切换
var time = setInterval(move, 2000);
// 优化 光标放到背景上面的时候停止滚动，移除继续滚动
$(".outer").mouseover(function() {
// 停止定时函数
clearInterval(time);
}).mouseout(function() {
time = setInterval(move, 2000);
});
// 点击右边的箭头改变图片
$(".btn_right").click(function() {
move();
});
// 点击左边箭头，改变图片
$(".btn_left").click(function() {
// 点击到第一个按钮
// 确保索引正确
// 点击到第一个按钮 i=-1
if (i <= -1) {
i = 3;
}
i -= 2;
move();
});
// 鼠标移入小圆按钮发生变化
$(".num li").mouseover(function() {
// 记录鼠标移入的校园按钮的索引，以便你的鼠标移出的时候，自动轮播直到向后一个位置切换
i = $(this).index();
$(".num li").eq(i).css("background", "orange").siblings().css("background", "grey");
$(".img li").eq(i).fadeIn().siblings().fadeOut();
})
})
</script>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
