需求：
- 五张尺寸为700*400的图片 实现自动轮播 时间三秒
- 显示轮播指示索引 点击索引显示对应图片
- 增加左右切换按钮 点击手动轮播图片
- 鼠标放上去显示箭头 离开隐藏
- 鼠标移至图片 停止轮播
首先引入：jquery-1.10.2.min.js 放在js文件夹下
下载链接：https://pan.baidu.com/s/1jIFUVem
.html
导入相关文件
<link rel="stylesheet" type="text/css" href="css/demo1.css"/>
<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/demo1.js" type="text/javascript" charset="utf-8"></script>
图片div
<div id="imglist">
<div class = "img-item">
< img src="img/1.png"/>
</div>
<div class = "img-item">
< img src="img/2.png"/>
</div>
<div class="img-item">
< img src="img/3.png"/>
</div>
<div class="img-item">
< img src="img/4.png"/>
</div>
<div class="img-item">
< img src="img/5.png"/>
</div>
</div>
左右按钮div
<div class="btn leftBtn">
< img src="img/leftBtn.png"/>
</div>
<div class="btn rightBtn">
< img src="img/rightBtn.png"/>
</div>
指示器div
<div id="pages">
<div class="page-item bg">
1
</div>
<div class="page-item ">
2
</div>
<div class="page-item">
3
</div>
<div class="page-item">
4
</div>
<div class="page-item">
5
</div>
</div>
.css
去除默认标签内外间距
* {
padding: 0px;
margin: 0px;
}
图片
#imglist .img-item {
float: left;
position: absolute;
}
左右两侧按钮
.btn {
position: absolute;
top: 175px;
display: none;
}
.leftBtn {
left: 20px;
}
.rightBtn {
left: 630px;
}
指示器
#pages {
position: absolute;
left: 265px;
top: 350px;
}
.page-item {
width: 30px;
height: 30px;
background-color: #F1F1F1;
line-height: 30px;
text-align: center;
float: left;
margin-right: 10px;
border-radius: 100%; /*剪切圆角*/
cursor: pointer; /*鼠标放上去显示手型*/
}
.bg {
background-color: #FF0000;
}
.js
//下标
var i = 0;
//定时器
var time;
//启动执行
$(function() {
//1.默认显示第一张图片
//$(".img-item") 获取class = img-item 对象
//$(".img-item").eq(0) 获取class = img-item 的第一个对象
//$(".img-item").eq(0).show() 获取class = img-item 的第一个对象 并显示
//$(".img-item").eq(0).show().siblings() 获取class = img-item 的第一个对象 并显示 其余的兄弟元素
//$(".img-item").eq(0).show().siblings().hide() 获取class = img-item 的第一个对象 并显示 其余的兄弟元素隐藏
$(".img-item").eq(0).show().siblings().hide();
//2.开启定时器
showTime();
//3.给page-item增加鼠标移上去和离开事件
$(".page-item").hover(function() { //鼠标移上去事件
//3.0停止计时器
clearInterval(time);
//3.1拿到下标索引
i = $(this).index();
//3.2图片滚动到索引位置
PageScroll();
}, function() { //鼠标离开事件
//3.3开启计时器
showTime();
});
//4.给左边按钮增加点击事件
$(".leftBtn").click(function() {
//4.0停止计时器
clearInterval(time);
//4.1 下标减1 下标为0时 下标归4️⃣
if(i > 0) {
i--;
} else {
i = 4
}
//4.2 滚动
PageScroll();
//4.3开启计时器
showTime();
})
//5.给右边按钮增加点击事件
$(".rightBtn").click(function() {
//5.0停止计时器
clearInterval(time);
//5.1下标+1超过4重置0
if(i >= 4) {
i = 0
} else {
i++;
}
//5.2滚动
PageScroll();
//5.3开启计时器
showTime();
})
//6.0鼠标移动至 图片
$(".img-item").hover(function(){//鼠标放上图片
//6.1停止计时器
clearInterval(time);
//6.2显示左右箭头
$(".btn").show();
},function(){//鼠标离开图片
//6.3开启计时器
showTime();
//6.4隐藏左右箭头
$(".btn").hide()
})
})
计时器事件
function showTime() {
// 计时器 三秒执行 一次轮播
time = setInterval(function() {
//1.控制轮播下标 最大4（图片的数量-1）
if(i >= 4) {
i = 0
} else {
i++;
}
console.log(i);
//2.图片滚动
PageScroll();
}, 3000);
}
图片滚动事件
function PageScroll() {
//1.图片滚动切换
//fadeIn(300) 三秒显示
//fadeOut(300) 三秒隐藏
$(".img-item").eq(i).fadeIn(300).siblings().fadeOut(300);
//2.page滚动切换
//2.1直接增加css
// $(".page-item").eq(i).css("background-color", "#FF0000").siblings().css("background-color", "#F1F1F1");
//2.2增加class
$(".page-item").eq(i).addClass("bg").siblings().removeClass("bg");
}
