css+html+javascript制作banner自动轮播图

css+html+javascript制作banner自动轮播图

设计思路

banner自动轮播图是根据之前的点击切换图片之上进行了修改；在其之上加上了setInterval（）自动调取函数，加上这个函数后，就不用通过点击图片来实现图片的切换。
如果对其他代码不明白的话，可以看一下我之前写的轮播图的！

样式代码：

<style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #img{
            width: 1000px;
            height: auto;
            margin-left: 214px;
        }
        #list{
            width: 300px;
            height: 30px;
            margin-left: 650px;
        }
        #list li{
            width: 20px;
            height:20px;
            border-radius: 10px;
            cursor: pointer;
            background: #c0c0c0;
            float: left;

        }
        .bg{
            background: #f9f2f4!important;
        }
    </style>

JavaScript代码：

<script>
        var i = 0;
        function f(){
            var arr = ["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg","img/05.jpg"];
            var img = document.getElementById("img");
            i++;
            if(i>=arr.length){
                i=0;
            }
            img.src=arr[i];
            var list = document.getElementById("list");
            var li = list.getElementsByTagName("li");
            for(var j=0;j<li.length;j++){
                li[j].className="";
            }
            li[i].className="bg";
        }
        setInterval("f()",1000);
    </script>

HTML代码：

<img src="img/01.jpg" id="img" onclick="f()">
<ul id="list">
    <li class="bg"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

运行结果：