<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-mini.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 900px;
height: 400px;
margin: 100px auto;
background-color: pink;
position: relative;
overflow: hidden;
}
.clearfix::after {
display: block;
content: "";
clear: both;
}
.box>ul {
width: 4500px;
position: relative;
}
.box>ul>li {
float: left;
width: 900px;
height: 400px;
list-style: none;
}
.box>ul>li>img {
width: 900px;
height: 400px;
}
.btn>a {
position: absolute;
display: inline-block;
width: 50px;
height: 100px;
font-size: 60px;
text-decoration: none;
color: #fff;
top: 0;
top: 50%;
margin-top: -50px;
}
.btn .btnLeft {
left: 0;
}
.btn .btnRight {
right: 0;
}
.dot {
position: absolute;
bottom: 30px;
width: 180px;
left: 50%;
width: 200px;
height: 30px;
margin-left: -90px;
}
.dot>ul>li {
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 50%;
margin-left: 15px;
float: left;
list-style: none;
}
.box .dotBg {
background-color: teal;
}
</style>
</head>
<body>
<div class="box">
<ul class="clearfix banner">
<li><img src="./imgs/img/1.jpg" alt=""></li>
<li><img src="./imgs/img/2.jpg" alt=""></li>
<li><img src="./imgs/img/3.jpg" alt=""></li>
<li><img src="./imgs/img/4.jpg" alt=""></li>
<li><img src="./imgs/img/1.jpg" alt=""></li>
</ul>
<div class="btn">
<a href="javaScript:;" class="btnLeft"><</a>
<a href="javaScript:;" class="btnRight">></a>
</div>
<div class="dot">
<ul></ul>
</div>
</div>
</body>
<script>
$(function () {
function lbt(boxWidth, ladyTime) {
function dot(dotLength) {
for (var i = 0; i < dotLength - 1; i++) {
$(".dot>ul").append("<li></li>");
}
$(".dot>ul>li").eq(0).addClass("dotBg");
}
var dotLength = $(".banner>li").length;
dot(dotLength);
//右击
var timer = null;
var imgIndex = 0;
$(".btnRight").on("click", function () {
if (imgIndex <= dotLength - 1) {
imgIndex++;
} if (imgIndex > dotLength - 1) {
imgIndex = 1;
$(".banner").css("left", "0px");
}
if (imgIndex == dotLength - 1) {
$(".dot>ul>li").eq(0).addClass("dotBg").siblings().removeClass("dotBg");
}
$(".banner").stop().animate({ "left": -boxWidth * imgIndex + "px" }, ladyTime);
$(".dot>ul>li").eq(imgIndex).addClass("dotBg").siblings().removeClass("dotBg");
});
//左击
$(".btnLeft").on("click", function () {
if (imgIndex >= 0) { imgIndex-- };
if (imgIndex < 0) {
imgIndex = dotLength - 2;
$(".banner").css("left", -`${(dotLength - 1) * boxWidth}` + "px");
}
$(".dot>ul>li").eq(imgIndex).addClass("dotBg").siblings().removeClass("dotBg");
$(".banner").stop().animate({ "left": -boxWidth * imgIndex + "px" }, ladyTime);
});
//封装函数
function bannerGo() {
if (imgIndex <= dotLength - 1) {
imgIndex++;
} if (imgIndex > dotLength - 1) {
imgIndex = 1;
$(".banner").css("left", "0px");
}
if (imgIndex == dotLength - 1) {
$(".dot>ul>li").eq(0).addClass("dotBg").siblings().removeClass("dotBg");
}
$(".banner").stop().animate({ "left": -boxWidth * imgIndex + "px" }, ladyTime);
$(".dot>ul>li").eq(imgIndex).addClass("dotBg").siblings().removeClass("dotBg");
}
timer = setInterval(bannerGo, 2000);
//鼠标附上去暂停
$(".box").hover(function () {
clearInterval(timer);
timer = null;
}, function () {
timer = setInterval(bannerGo, 2000);
});
//点击按钮
$(".dot>ul>li").on("click", function () {
var dotIndex = $(this).index();
$(".banner").stop().animate({ "left": -boxWidth * dotIndex + "px" }, ladyTime);
$(".dot>ul>li").eq(dotIndex).addClass("dotBg").siblings().removeClass("dotBg");
});
};
lbt(900, 700);//调用,第一个参数是图片的宽度,第二个是过度时间
})
</script>
</html>