轮播效果：点击下一个按钮跳转到下一张图片，点击上一个按钮跳转到上一个图片；鼠标移进图片轮播停止，鼠标移出则自动轮播。 1.HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#container {
width: 1000px;
height: 380px;
position: relative;
margin: 20px auto;
overflow: hidden;
}
#list {
width: 7000px;
height:380px;
position: absolute;
z-index: 1;
}
#list img {
float: left;
display: block;
}
#pre {
background: url(../images/左箭头.png) no-repeat;
width: 30px;
height: 30px;
float: left;
position: absolute;
top: 190px;
left: 10px;
cursor: pointer;
display: none;
z-index: 999;
}
#next {
background: url(../images/右箭头.png) no-repeat;
width: 30px;
height: 30px;
float: right;
position: absolute;
top: 190px;
right: 10px;
cursor: pointer;
display: none;
z-index: 999;
}
#container:hover #pre,
#container:hover #next {
display: block;
}
#pre:hover,
#next:hover {
background-color: rgba(0, 0, 0, 0.7);
}
#dot {
width: 1000px;
height: 10px;
position: absolute;
bottom: 15px;
left: 450px;
z-index: 10;
}
#dot span {
width: 10px;
height: 10px;
display: block;
border-radius: 10px;
background-color: #fff;
margin: 0 5px;
float: left;
cursor: pointer;
}
#dot .on {
background-color: #69aaec;
}
</style>
</head>
<!-- js代码 -->
<script src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
window.onload=()=>{
//定义变量
//注意选择器的。或者#
let container=$("#container");
let pre_btn=$("#pre");
let next_btn=$("#next");
let list=$("#list");
let dots=$("#dot span");
let index=0;//图片的下标
let int=null;//int是什么：接收定时器返回的数值
//总：先写事件，后写方法
// 1.下一个按钮的事件
// 2.上一个按钮事件
// 3.小圆点点击事件
// 4.鼠标移动图片悬停事件
// 5.核对小圆点与图片对应的方法
// 6.图片自动轮播的方法
//下一张图片的按钮的点击事件
next_btn.click(function(){
// $('#list').is(':animated') 检查元素是否在执行动画中，没有在执行动画返回为false反则返回true
console.log($('#list').is(':animated'))
if($('#list').is(':animated')){
return false;
}
//判断下一张图片往左走
index=++index>4?0:index;
//此处的-1000的负号是代表往左走
let new_left=-1000*index;
//判断好了就实行动画方法，让它动！
list.animate({"left":new_left+'px'},1000,checkDots);
})
//上一张图片的按钮的点击事件
pre_btn.click(function(){
// $('#list').is(':animated') 检查元素是否在执行动画中，没有在执行动画返回为false反则返回true
console.log($('#list').is(':animated'))
if($('#list').is(':animated')){
return false;
}
//判断图片的逻辑
index=--index<0?4:index;
//生成新的图片位置
let new_left=-1000*index;
//谁动起来
list.animate({"left":new_left+'px'},1000,checkDots);
})
//小圆点点击,对应图片事件
dots.click(function(){
// $('#list').is(':animated') 检查元素是否在执行动画中，没有在执行动画返回为false反则返回true
if ($('#list').is(':animated')) {
return false;
}
//小圆点当前点击，用数组包起来
index=$(this).attr("data-index");
let new_left=-1000*index;
list.animate({"left":new_left+'px'},1000,checkDots)
//小圆点点击后，怎么移动的
})
//鼠标点击容器，图片悬停事件
container.hover(function(){
//鼠标移进去的时候清除定时器
clearInterval(int)
},function(){
//鼠标移出去的时候自动播放动画
autoPlay();
})
//检查是否对应焦点方法
let checkDots=function(){
//每滑动一次删除掉原来的小圆点类
dots.removeClass("on");
//再添加新的图片对应的小圆点
dots.eq(index).addClass("on");
}
//自动轮播方法
function autoPlay(){
int =setInterval(function(){
next_btn.click();
},2000)
}
}
</script>
<body>
<div id="container">
<div id="pre"></div>
<div id="next"></div>
<div id="list" style="left:0px">
<a href="#"><img src="../images/ts-01.jpg" width="1000"></a>
<a href="#"><img src="../images/ts-02.jpg" width="1000"></a>
<a href="#"><img src="../images/ts-03.jpg" width="1000"></a>
<a href="#"><img src="../images/ts-04.jpg" width="1000"></a>
<a href="#"><img src="../images/ts-01.jpg" width="1000"></a>
</div>
<div id="dot">
<span data-index="0" class="on"></span>
<span data-index="1"></span>
<span data-index="2"></span>
<span data-index="3"></span>
<span data-index="4"></span>
</div>
</div>
</body>
</html>
2.展示效果
