全部手写的哟
Html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="jquery3.min.js"></script>
<title>jq图片轮播</title>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
}
#container {
width: 100%;
border: 0px solid #eee;
position: relative;
overflow: hidden;
margin: 50px auto;
cursor: pointer;
height: 500px;
}
#list {
position: absolute;
width: 100%;
}
#list img {
float: left;
width: 100%;
position: absolute;
/* transition: all 1s; */
}
#buttons {
position: absolute;
z-index: 2;
bottom: 10px;
left: 50%;
margin-left: -34px;
}
#buttons span {
display: block;
width: 20px;
height: 20px;
background-color: #333;
border: 1px solid #fff;
margin-right: 5px;
border-radius: 50%;
float: left;
cursor: pointer;
transition: 0.3s;
}
#buttons .on {
background: orangered;
}
.arrow {
display: block;
width: 40px;
height: 40px;
font-size: 36px;
text-align: center;
position: absolute;
color: #fff;
z-index: 3;
top: 50%;
margin-top: -20px;
line-height: 40px;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
a:hover {
background-color: #23222259;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left:0px">
<img src="https://ww2.sinaimg.cn/large/005BYqpgly1g162eej3sej30y20cstdu.jpg" alt="1" style="z-index: 1;" />
<img src="https://ww2.sinaimg.cn/large/005BYqpgly1g162ev1d8xj30y20cs0xy.jpg" alt="2" />
<img src="https://ww2.sinaimg.cn/large/005BYqpgly1g162f7080cj30y20cs79p.jpg" alt="3" />
<img src="https://ww2.sinaimg.cn/large/005BYqpgly1g162fk1v8bj30y20cswij.jpg" alt="4" />
</div>
<div id="buttons">
<span style="background: orangered;" index="0" ;></span>
<span index="1" ;></span>
<span index="2" ;></span>
<span index="3" ;></span>
</div>
<a href="#" id="prev" class="arrow"><</a>
<a href="#" id="next" class="arrow">></a>
</div>
</body>
</html>
JS部分
<script>
var spans = $('span');//获取所有span（按钮）
var imgs = $('img');//获取所有的img标签
var jsq = null;//计时器初始值定义为null
var i = 0;//全局变量i初始值0（img的下标）
function superauto() {//函数：JQ链式写法实现按钮变色和变化图片
$('img').eq(i).fadeIn(1000).siblings().fadeOut(1000);//siblings()：所有兄弟标签fadeOut(500)：反向兄弟标签透明度在500毫秒从1变为0
$("span").eq(i).css({ background: "orangered" }).siblings().css({ background: "" });//eq：当时操作的下标
}
function svip() {//定义自动播放函数
i++;//i每次加1
if (i >= imgs.length) {//判断如果i大于所有img标签长度后
i = 0;//使i归0
}
superauto();//最后执行变背景和变图片的函数
}
$("#next").click(function () {//下一张按钮
svip();//直接执行自动播放函数
});
$("#prev").click(function () {//上一张按钮及原点背景变色
if (i <= 0) {//如果i=0时
i = imgs.length;//使i等于img标签长度
}
i--;//i自减
superauto();//最后执行变背景和变图片的函数
});
$('span').hover(function () {//定义鼠标放进原点函数
i=$(this).index();//使鼠标覆盖的下标等于i
superauto();
},function(){//定义鼠标移出时的函数
i=$(this).index();//使用最后一次小圆点的下标值 使他等于i 实现图片从当前位置出发继续播放下去
})
//计时器
jsq = setInterval(svip, 2000);//让定时器赋值为jsq
$('#container').hover(function () {//定义鼠标进去主题的函数
clearInterval(jsq);//暂停图片轮播
}, function () {//鼠标离开时
jsq = setInterval(svip, 2000);//继续播放！
})
</script>
在线测试
源码下载
Jquery三级联动
