1 css
<style>
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
div,
img,
span,
i,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td,
strong,
input,
label,
textarea,
figure,
a,
select {
margin: 0;
padding: 0;
font-family: Verdana, "Lantinghei SC", "Hiragino Sans GB", "Microsoft Yahei", Helvetica, arial, sans-serif;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}
</style>
<style>
.slideBox{
position: relative;
margin: 100px auto;
width: 1000px;
height: 402px;
border: 1px solid #2C8DFB;
overflow: hidden;
}
.slideBox ul{
width: 500%;
font-size: 0;
border: 1px solid red;
box-sizing: content-box;
}
.slideBox ul li{
width: 20%;
height: 402px;
display: inline-block;
}
.slideBox ul li img{
width: 100%;
}
.btn-ctrl{
position: absolute;
z-index: 100;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
line-height: 30px;
background: red;
color: #fff;
}
#btn-prev{
top: 50%;
left: 5%;
}
#btn-next{
top: 50%;
right: 5%;
}
.dots{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 25px;
background: rgba(255, 255, 255, 0.5);
border-radius: 10px;
padding: 3px;
}
.dot {
width: 12px;
height: 12px;
background: #fff;
float: left;
border-radius: 6px;
margin: 0 3px;
}
.current {
background: red;
}
</style>
2 html
<section class="slideBox">
<div id="btn-prev" class="btn-ctrl"><</div>
<div id="btn-next" class="btn-ctrl">></div>
<ul id="u25" class="u25">
<li><img src="images/fade1.jpg" alt=""></li>
<li><img src="images/fade2.jpg" alt=""></li>
<li><img src="images/fade3.jpg" alt=""></li>
<li><img src="images/fade4.jpg" alt=""></li>
<li><img src="images/fade1.jpg" alt=""></li>
</ul>
<div class="dots">
<div class="dot current"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
3 js
//自动播放
autoSlide()
var timer;
function autoSlide() {
timer = setInterval(function () {
$('#btn-next').click()
},1000);
}
var picIndex = 0;
var length = $("#u25 li").length;
//右边按钮
$('#btn-next').click(function () {
if (picIndex === length - 1) { //4
picIndex = 0;
$('#u25').css({'margin-left': '0px'});
}
picIndex++;
console.log(picIndex);
var left = -picIndex * 1000 + 'px';
$("#u25").stop().animate({'margin-left': left}); // 在使用jquery的animate动画时,如果多次触发动画,会出现动画错乱的现象,需要 先暂停再执行(使用stop())
//小圆点控制
if(picIndex === length - 1){ //4
$(".dots .dot").eq(0).addClass('current').siblings().removeClass('current')
}else{
$(".dots .dot").eq(picIndex).addClass('current').siblings().removeClass('current')
}
})
//左边按钮
$('#btn-prev').click(function () {
if (picIndex === 0) {
picIndex = 4;
$('#u25').css({'margin-left': '-4000px'});
}
picIndex--;
console.log(picIndex);
var left = -picIndex * 1000 + 'px';
$("#u25").stop().animate({'margin-left': left});
if(picIndex === 0){ //4
$(".dots .dot").eq(3).addClass('current').siblings().removeClass('current')
}else{
$(".dots .dot").eq(picIndex).addClass('current').siblings().removeClass('current')
}
})
//为小圆点绑定鼠标点击事件
$('.dots .dot').mousedown(function () {
var dLi = $(this).index();
var left = - dLi * 1000 + 'px';
$("#u25").stop().animate({'margin-left': left});
$(".dots .dot").eq(dLi).addClass('current').siblings().removeClass('current')
})
//停止和恢复切换
$('.slideBox').mouseover(function () {
clearInterval(timer)
})
$('.slideBox').mouseout(function () {
autoSlide()
})