基于html+css+js+jquery实现轮播图（自动轮播，手动选择，翻页）
实现效果：
adver.html页面代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 广告图片轮播切换</title>
<link rel="stylesheet" href="css/style.css">
<script type="application/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var id = 1;
function timer(){
id = id%6+1;
$("li:nth-of-type("+id+")").css('background','orange').siblings().css("background","#333333");
$("div[class='adver']").css('background','url(images/adver0' + id + '.jpg)')
}
function over(i){
id = i;
$("li:nth-of-type("+i+")").css('background','orange').siblings().css("background","#333333");
$("div[class='adver']").css('background','url(images/adver0' + i + '.jpg)')
clearInterval(auto);
}
function out(){
auto = setInterval(timer,2000);
}
function clkArrowLeft(){
clearInterval(auto);
id = id-1%6;
if(id==0) id=6;
$("li:nth-of-type("+id+")").css('background','orange').siblings().css("background","#333333");
$("div[class='adver']").css('background','url(images/adver0' + id + '.jpg)')
auto = setInterval(timer,2000);
}
function clkArrowRight(){
clearInterval(auto);
id = id%6+1;
$("li:nth-of-type("+id+")").css('background','orange').siblings().css("background","#333333");
$("div[class='adver']").css('background','url(images/adver0' + id + '.jpg)')
auto = setInterval(timer,2000);
}
</script>
<style>
li{
cursor: pointer;
}
</style>
</head>
<body>
<div class="adver">
<ul>
<li onmouseover="over(1);" onmouseout="out();">1</li>
<li onmouseover="over(2);" onmouseout="out();">2</li>
<li onmouseover="over(3);" onmouseout="out();">3</li>
<li onmouseover="over(4);" onmouseout="out();">4</li>
<li onmouseover="over(5);" onmouseout="out();">5</li>
<li onmouseover="over(6);" onmouseout="out();">6</li>
</ul>
<!-- 手动轮播 -->
<div class="arrowLeft" onclick="clkArrowLeft();"><</div><div class="arrowRight" onclick="clkArrowRight();">></div>
</div>
</body>
<script type="text/javascript">
//自动轮播
var auto = setInterval(timer,2000);
</script>
</html>
style.css代码：
ul,li{padding: 0;margin: 0; list-style: none;
-webkit-user-select:none;/*webkit浏览器*/
-moz-user-select:none;/*火狐*/
-ms-user-select:none;/*IE10*/
user-select:none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "���ź�"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{
position: absolute;
width: 30px;
background:rgba(0,0,0,0.2);
height: 50px;
line-height: 50px;
text-align: center;
top:200px;
z-index: 150;
font-size: 28px;
font-weight: bold;
cursor: pointer;
color:#ffffff;
-webkit-user-select:none;/*webkit浏览器*/
-moz-user-select:none;/*火狐*/
-ms-user-select:none;/*IE10*/
user-select:none;
/* display: none; */
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){
background: orange;
}