<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="JS/jquery-3.3.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#div1 {
width: 100%;
background: url(1.jpeg) center top no-repeat;
height: 368px;
position: relative;
text-align: center;
}
#div1 div {
width: 30px;
height: 80px;
background-color: #000;
position: absolute;
color: #fff;
font-size: 40px;
line-height: 80px;
text-align: center;
}
#leftbtn {
top: 144px;
}
#rightbtn {
top: 144px;
right: 0px;
}
#nav {
position: absolute;
width: 350px;
top: 345px;
left: 50%;
margin-left: -130px;
}
#nav li {
width: 40px;
height: 4px;
float: left;
background-color: #fff;
margin-left: 10px;
}
</style>
<script>
function style($) {
$(".drop").css("backgroundColor", "#fff");
}
$(function () {
var imgs = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg", "5.jpeg"];
$(".drop").eq(0).css("backgroundColor", "#000");
$(".drop").each(function (i) {
$(".drop").eq(i).mouseover(function () {
style($);
$(this).css("backgroundColor", "#000");
$("#div1").css("backgroundImage", "url(" + imgs[i] + ")");
});
});
var index = 0;
$("#rightbtn").click(function () {
index++;
if (index > imgs.length-1) {
index = 0;
}
$("#div1").css("backgroundImage", "url(" + imgs[index] + ")");
style($);
$(".drop").eq(index).css("backgroundColor", "#000");
clearInterval(timeout);
timeout = setInterval(show2, 2000);
})
var index = imgs.length - 1;
$("#leftbtn").click(function () {
index--;
if (index < 0) {
index = imgs.length - 1;
}
$("#div1").css("backgroundImage", "url(" + imgs[index] + ")");
style($);
$(".drop").eq(index).css("backgroundColor", "#000");
clearInterval(timeout);
timeout = setInterval(show2, 2000);
})
var i = 0;
function show1() {
$("#div1").css("backgroundImage", "url(" + imgs[i] + ")");
style($);
$(".drop").eq(i).css("backgroundColor", "#000");
i++;
if (i > imgs.length - 1) {
i = 0;
}
}
var index=0;
function show2() {
style($);
$(".drop").eq(index).css("backgroundColor", "#000");
$("#div1").css("backgroundImage", "url(" + imgs[index] + ")");
index++;
if (index> imgs.length - 1) {
index = 0;
}
}
var timeout = setInterval(show1, 2000);//每隔2秒改变一次
$(".drop").mouseover(function () {
clearInterval(timeout);
timeout = setInterval(show2, 2000);
index= $(this).index(".drop");
})
})
</script>
</head>
<body>
<div id="div1">
<a href="#"> <div id="leftbtn"><</div></a>
<a href="#"><div id="rightbtn">></div></a>
</div>
<ul id="nav">
<li class="drop"></li>
<li class="drop"></li>
<li class="drop"></li>
<li class="drop"></li>
<li class="drop"></li>
</ul>
</body>
</html>
