简单通过点击左右按钮来改变图片轮播的实现方法

首先建立基本的标签，利用DIV

<p id="contianer">
    <ul id="uls">                                                          //建立无序列表，在li里面利用img存储图片，里面路径根据自己的来更改
        <li ><img src="img/124402-106.jpg"> </li>
        <li ><img src="img/338659-106.jpg"> </li>
        <li ><img src="img/351761-106.jpg"> </li>
        <li ><img src="img/352846-106.jpg"> </li>
    </ul>
    <p id="left">左</p>//左右用来实现按钮点击效果
    <p id="right">右</p>
    <ol id="ols">                 //建立有序列表用来跟踪当前显示那张图片，在li其中添加一个类用来替换显示
        <li class="bg"></li> 
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</p>

样式部分

*{margin: 0;padding: 0;}
#contianer{width: 1920px;height: 900px;overflow: hidden;margin: 50px auto;position: relative;}//给父级添加相对定位
#contianer ul{text-decoration: none;}
#contianer ul li{height: 100%;width: 100%;float: left;}
#contianer p{
    width: 30px;
    height: 50px;
    background: #555;
    color: white;
    line-height: 60px;
    opacity:0.5;
    font-size: 20px;
    top:450px ;
    position: absolute;
}
#left{
    left:0;
}
#right{right:0;}
ol{position: absolute;bottom: 20px;left:300px;list-style-type: none;}
ol li{margin: 5px; width: 50px;height: 50px;border-radius: 100%;float: left;background: white;}
.bg{background: red;}

js效果部分

var left=document.getElementById("left"),
    right=document.getElementById("right"),
    uls=document.getElementById("uls"),
    lis=uls.getElementsByTagName("li"),
    ols=document.getElementById("ols"),
    lid=ols.getElementsByTagName("li");
var index=0;
setInterval(function () {
    for(var i=0;i<lis.length;i++){
        lis[i].style.display="none";
        lid[i].className="";
    }
    index++;
    if (index>lis.length-1)
    {
        index=0;
    }
    lis[index].style.display="block";
    lid[index].className="bg";
},10000);
right.onclick=function(){
    for(var i=0;i<lis.length;i++){
        lis[i].style.display="none";
        lid[i].className="";
    }
    index++;
    if (index>lis.length-1)
    {
        index=0;
    }
    lis[index].style.display="block";
    lid[index].className="bg";

}
left.onclick=function(){
    for(var i=0;i<lis.length;i++){
        lis[i].style.display="none";
        lid[i].className="";
    }
    index--;
    if (index<0)
    {
        index=lis.length-1;
    }
    lis[index].style.display="block";
    lid[index].className="bg";
}