<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>1</title>
<style type="text/css">
#second_div {
width: 1462px;
height: 296px;
position: relative;
}
.img_box {
overflow: hidden;
width: 1462px;
height: 296px;
border: 1px solid;
position: relative;
}
.img_box img {
width: 1462px;
height: 296px;
position: absolute;
}
.dian {
list-style: none;
position: absolute;
right: 60px;
bottom: 10px;
}
.dian li {
float: left;
margin-left: 20px;
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
}
</style>
<body>
<div id="second_div">
<div class="img_box">
</div>
<ul class="dian"></ul>
</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function () {
var ping = ["1.jpg", "2.jpg", "3.jpg","4.jpg"]
var index = 0,
next = 0;
var imgArr = "";
var liArr = "";
$.each(ping, function () {
liArr += `<img src="" />`;
});
$(".img_box").append(liArr);
//设置默认第一张图片
$(".img_box img").eq(0).attr("src", "images/" + ping[0]);
//获取img长度 循环放入li标签 (小圆点)
var len = document.querySelectorAll(".img_box img").length;
for (var a = 0; a < len; a++) {
imgArr += `<li class="img${a}"></li>`;
}
var dian = $(".dian");
dian.append(imgArr);
//获取大盒子的宽度 img像左偏移大盒子的宽度。轮播图与小白点初始状态；
var img = $(".img_box img");
var divW = $(".img_box").width();
var li = $(".dian li");
img.css("left", divW);
img.eq(0).css("left", 0);
li.eq(0).css("background", "white");
//轮播方法
function show() {
next++;
if (next == len) {
next = 0;
}
//轮播一次加载一张图片。
$(".img_box img")
.eq(next)
.attr("src", "images/" + ping[next]);
img.eq(next).css("left", divW);
img.eq(index).animate({ left: -divW });
img.eq(next).animate({ left: 0 });
li.eq(next).css("background", "white");
li.eq(index).css("background", "gray");
//当前索引next
// alert(next)
//赋值，让小白点始终保持一个
index = next;
}
//调用循环
var t = setInterval(show, 3000);
//判断img数量，显示隐藏小白点
if (len <= 1) {
dian.hide();
clearInterval(t);
}
});
</script>
</html>
