摘要：
*{margin:0;padding:0;list-style:none;}#div1{100%;background:url(1.jpeg)centertopno-repeat;height:368px;position:relative;text-align:center;}#div1div{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;350px;top:345px;left:50%;margin-left:-130px;}#navli{40px;height:4px;float:left;background-color:#fff;margin-left:10px;}functionstyle($){$(".drop").css("backgroundColor","#fff");}$(function(){varimgs=["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]+")");});});varindex=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);})varindex=imgs.length-1;$("#leftbtn").click(function(){index--;if(indeximgs.length-1){i=0;}}varindex=0;functionshow2(){style($);$(".drop").eq(index).css("backgroundColor","#000");$("#div1").css("backgroundImage","url("+imgs[index]+")");index++;if(index˃imgs.length-1){index=0;}}vartimeout=setInterval(show1,2000);//每隔2秒改变一次$(".drop").mouseover(function(){clearInterval(timeout);timeout=setInterval(show2,2000);index=$(this).index(".drop");})})˂˃
<!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 {
100%;
background: url(1.jpeg) center top no-repeat;
height: 368px;
position: relative;
text-align: center;
}
#div1 div {
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;
350px;
top: 345px;
left: 50%;
margin-left: -130px;
}
#nav li {
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>