实现样式：
tplb.css
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.adver {
margin: 0 auto;
width: 700px;
overflow: hidden;
height: 454px;
position: relative;
background: url(../img/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-family: "楷体";
font-size: 28px;
font-weight: bold;
cursor: pointer;
display: none;
}
.arrowLeft {
left: 10px;
}
.arrowRight {
right: 10px;
}
li:nth-of-type(1) {
background: orange;
}
html(6张图片轮播)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/tplb.css" />
</head>
<body>
<!--
1.完成点击 》、《 切换图片
1.1 鼠标进到 id="adver" 显示 》《
1.2 给绑定 》 单击事件，将 div 的背景图片切换到下一张
1.2.1 将所有被切换的图片存储在数组
1.2.2 存储的是现在显示的图片的在数组中的索引
1.2.3 将 索引 + 1，通过计算之后的索引到数组中获取图片的路径
1.2.4 如果 计算索引 超过了数组长度，索引从 0 开始
1.3 给绑定 》 单击事件，将 div 的背景图片切换到上一张
1.2.1 将 索引 - 1，通过计算之后的索引到数组中获取图片的路径
1.2.2 如果 计算索引 < 0，索引从 数组.length-1 开始
1.4 移出 id="adver" 隐藏 》《
-->
<div class="adver" id="adver" onm ouseover="showArrow()" onm ouseout="hideArrow()">
<ul>
<li onclick="changeNumberImage(this)">1</li>
<li onclick="changeNumberImage(this)">2</li>
<li onclick="changeNumberImage(this)">3</li>
<li onclick="changeNumberImage(this)">4</li>
<li onclick="changeNumberImage(this)">5</li>
<li onclick="changeNumberImage(this)">6</li>
</ul>
<div class="arrowLeft" id="arrowLeft" onclick="changePrveImage()">
<
</div>
<div class="arrowRight" id="arrowRight" onclick="changeNextImage()">
>
</div>
</div>
<script type="text/javascript">
// 存储所有被切换的图片
var imageArray = ["url('img/adver01.jpg')", "url('img/adver02.jpg')", "url('img/adver03.jpg')",
"url('img/adver04.jpg')", "url('img/adver05.jpg')", "url('img/adver06.jpg')",
];
// 存储的是现在显示的图片的在数组中的索引
var index = 0;
//轮播
function show(){
setInterval(function(){
index++;
if(index>=imageArray.length){
index=0;
}
//切换图片地址，修改li样式
changeImage();
},3000)
}
show();
// 鼠标移入
function showArrow(){
document.getElementById("arrowLeft").style.display="block";
document.getElementById("arrowRight").style.display="block";
}
//鼠标移出
function hideArrow(){
document.getElementById("arrowLeft").style.display="none";
document.getElementById("arrowRight").style.display="none";
}
//切换下一张图片
function changeNextImage(){
// 1 将 索引 + 1，通过计算之后的索引到数组中获取图片的路径
index++;
// 2 如果 计算索引 超过了数组长度，索引从 0 开始
if(index>=imageArray.length){
index=0;
}
changeImage();
}
//切换上一张图片
function changePrevImage(){
// 将 索引 - 1
index--;
// 如果 计算索引 < 0，索引从 数组.length-1 开始
if(index<0){
index=imageArray.length-1;
}
changeImage();
}
//切换图片
function changeImage(){
// 数组中获取图片的路径
var imagePath=imageArray[index];
// 设置图片背景图片
document.getElementById("adver").style.background=imagePath;
// 获取所有的li
var lis=document.getElementsByTagName("li");
// 将 所有的li设置为黑色
for(var i=0;i<lis.length;i++){
lis[i].style.backgroundColor="black";
}
lis[index].style.backgroundColor="orange";
}
//点击li切换图片
function changeNumberImage(liObj){
// 获取到 li 内容
var liNumber=liObj.innerText;
// 通过 liNumber 获取图片的下标
index=parseInt(liNumber)-1;
changeImage();
}
</script>
</body>
</html>
标签：index,轮播,img,url,jpg,js,索引,display,css From： https://www.cnblogs.com/19981206-zxb/p/17020592.html