基本轮播图应该怎么写

于杰0707

已于 2024-06-01 18:43:10 修改

阅读量1.4k

点赞数 5

文章标签： js 轮播图

于 2017-04-18 20:03:45 首次发布

本文链接：https://blog.csdn.net/yujie0707/article/details/70232055

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="public.css"/>
        <style type="text/css">
            a{display: block;position: relative;height: 320;width: 810px;}
            ul{position: absolute;bottom: 20px;left: 50%;margin-left: -76px;}
            li{height:30px;width: 30px;border:3px solid #666;border-radius: 50%;float: left;margin:5px;cursor: pointer;}
            .te{background: rgba(255,255,255,.5);}
        </style>
    </head>
    <body>
        <a>
            <img src="img/001.jpg"/>
            <ul>
                <li class="te"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </a>
        <script type="text/javascript">
            var aLi = document.getElementsByTagName("li");
            var aImg = document.getElementsByTagName("img")[0];
            function jishi(){
                i++;
                for(var j=0;j<aLi.length;j++){
                    aLi[j].className = "";
                }            
                aLi[i].className = "te";//通过classname改变li样式
                aImg.src = "img/00"+(i+1)+".jpg";    
                if(i==3){
                    i=-1;
                }
            }
            var i=0;
            var timer = setInterval(jishi,1000);
            function dianji(a){//将函数封装避免由于定时器异步执行产生bug
                aLi[a].onclick = function(){
                    clearInterval(timer);
                    for(var j=0;j<aLi.length;j++){
                        aLi[j].className = "";
                    }
                    aLi[a].className = "te";
                    aImg.src = "img/00"+(a+1)+".jpg";
                    i=a;//这里给定时器中的i赋一个初值
                    timer=setInterval(jishi,1000);//添加定时器之前要清楚定时器
                }
            }
            for(var b=0;b<aLi.length;b++){
                dianji(b);//给每一个li添加点击事件
            }
        </script>
    </body>
</html>