页面轮播图的js写法

首先CSS和HTML就不说了。说一下需要注意的点

1.自动播放 aotoChange
2.手动点击切换 给每个链接绑定响应函数
3.自动设置链接切换的相应 setA()
4.左右翻页button的函数
5.解决翻页上限，切换页面时候的css里面的hover是否管用等问题；

做出如图的界面

下面放上js的代码：

<script type="text/javascript">
            window.onload=function(){
                var header2=document.getElementById("header2")
                var button1=document.getElementById("button1")
                var button2=document.getElementById("button2")
                var allA=header2.getElementsByTagName("a")
                var img=document.getElementById("five")
                var arr1=['3.jpg','4.jpg',"5.jpg","6.jpg","7.jpg","8.jpg"]
                var index=0
                var timer
                //默认图片
                img.src="3.jpg"
                //默认链接
                allA[index].style.backgroundColor="red"
                
                //为每一个链接绑定响应函数
                for(var i=0;i<allA.length;i++){
                    //用来标记是哪一个链接
                    allA[i].num=i;
                    allA[i].onclick=function(){
                        clearInterval(timer)
                        index=this.num
                        img.src=arr1[index]
                        setA()
                        autoChange()
                    }
                }
                autoChange()
                button1.onclick=function(){
                        clearInterval(timer)
                        index=(--index+5)%5
                        img.src=arr1[index]
                        setA()
                        autoChange()
                    }
                button2.onclick=function(){
                    clearInterval(timer)
                    index=(++index)%5
                    img.src=arr1[index]
                    setA()
                    autoChange()
                }
                function autoChange(){
                    timer=setInterval(function(){
                        index=(++index)%5
                        img.src=arr1[index]
                        setA()
                    },2000)
                    
                }
                function setA(){
                    for(var i=0;i<allA.length;i++)
                    {
                        allA[i].style.backgroundColor=""
                    }
                    allA[index].style.backgroundColor="red"
                }
            }

这里的把setA()里面的设置成空是因为覆盖内联样式，让css里面的效果展示出来！可以做到hover的效果。
每次点击相应函数时候关闭**autoChange()**的定时器，然后重新计时，这样可以避免时间上的问题！
谢谢大家观看！