实现样式：

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张图片轮播)

    <div class="adver" id="adver" onmouseover="showArrow()" onmouseout="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()">  
            &lt;  
        </div>  
        <div class="arrowRight" id="arrowRight" onclick="changeNextImage()">  
            &gt;  
        </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>