思路：
要实现一个JavaScript轮播知识点，可以使用以下步骤：
- 创建一个HTML文件，添加一个图片容器和左右切换按钮。
- 编写CSS样式，设置图片容器的宽度、高度和位置，以及左右切换按钮的样式。
- 编写JavaScript代码，实现图片的自动切换和手动切换功能。
自动轮播：
- 使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；
- 使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；
- 时间函数每隔1秒执行一次。
手动轮播：
- 点击小圆圈按钮，显示相应图片。
- 使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；
- 当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；
- 鼠标移上、移开时的事件。
- 点击左右箭头，实现向前向后轮播图片。
css部分：
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}
.bigbox{
width:586px;
height:469px;
margin:0 auto;
position:relative;
overflow:hidden;
}
.img{
width:586px;
height:469px;
position:absolute;
top: 0;
left:0;
}
.img a{
width:586px;
height:469px;
position:absolute;
top: 0;
left:0;
}
.items{
width:160px;
height:16px;
/* border:1px solid red;*/
position:absolute;
bottom:10px;
left:220px;
}
.items .item{
width:16px;
height:16px;
background:skyblue;
border-radius: 50%;
float: left;
margin-right: 10px;
text-align: center;
line-height: 16px;
cursor:pointer;
}
.button{
width:586px;
height:350px;
position:absolute;
top:50%;
margin-top: -35px;
z-index: 3;
}
.btn{
width:50px;
height:70px;
background:rgba(0, 0, 0, 0.5);
color:white;
font-size: 36px;
text-align: center;
line-height: 70px;
}
.fr{
float:right;
}
.fl{
float:left;
}
</style>
```js
内容部分：
<body>
<div class="bigbox">
<div class="img">
<a href="" style="z-index:1;background:skyblue"><img src="images/lunbo01.jpg" alt="" /></a>
<a href=""><img src="images/lunbo03.jpg" alt="" /></a>
<a href=""><img src="images/lunbo08.jpg" alt="" /></a>
<a href=""><img src="images/lunbo05.jpg" alt="" /></a>
<a href=""><img src="images/lunbo06.jpg" alt="" /></a>
<a href=""><img src="images/lunbo08.jpg" alt="" /></a>
</div>
<ul class="items" style="z-index:99">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
</ul>
<div class="button">
<div class="btn fl" id="left"><</div>
<div class="btn fr" id="right">></div>
</div>
</div>
</body>
script部分：
<script type="text/javascript">
var num = 0; //获取当前图片的下标；
var img = document.getElementsByClassName("img")[0].getElementsByTagName("a"); //获取图片；
var li = document.getElementsByClassName("item"); //获取li数组元素；
var mouse = document.getElementsByClassName("bigbox")[0]; //获取放图片的整个盒子；
//自动轮播
function ImgAuto(adress){
for (var i = 0; i < img.length; i++) {
img[i].style.zIndex = "0"; //使当前所有的图片的层级为0，并且li的背景颜色设置为默认颜色；
li[i].style.background = "skyblue";
};
img[num].style.zIndex = "1"; //使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；
li[num].style.background = "white";
if (adress == "right") {
num++;
if (num >= img.length) {
num = 0; //当num大于等于图片数组长度时，归零；
};
}else if(adress == "left"){
num--;
if(num < 0){
num = img.length-1;
}
}
}
var move = setInterval(function(){
ImgAuto("right");
},1000); //每隔1秒执行一次
//手动轮播
for (var i = 0; i < img.length; i++) {
li[i].index = i;
li[i].onclick = function(){
for (var j = 0; j < img.length; j++) {
img[j].style.zIndex = "0";
li[j].style.background = "skyblue";
};
this.style.background = "white";
img[this.index].style.zIndex = "1";
num = this.index;
}
};
mouse.onmouseover = function(){ //鼠标移上去的事件（停止自动轮播）
clearInterval(move);
}
mouse.onmouseout = function(){ //鼠标移开事件（恢复自动轮播）
move = setInterval(function(){
ImgAuto("right")
},1000);
}
left.onclick = function(){ //左边按钮事件；
ImgAuto("left");
}
right.onclick = function(){ //右边按钮事件；
ImgAuto("right");
}
</script>
知识点
获取DOM元素：
- document.getElementsById():通过id获取对象，id是唯一的，可以不获取。document.getElementsByClassName()：通过class属性获取对象。
- document.getElementsByTagName()：通过标签名获取对象。
- document.querySelectorAll():可通过所有获取。
事件
- onmouseover():鼠标移上时事件；
- onmouseout():鼠标移开时事件；
- onclick():单击事件。
