原生JS轮播图

来源：互联网发布：文件夹加密软件免费编辑：程序博客网时间：2024/06/04 19:52
思路：下层放轮播图片，图片上层放置小圆点，点击小圆点的时候图片随着切换。
具体代码如下：
<!DOCTYPE ><html>    <head>        <meta charset="utf-8" />        <style>            div,ul,li,img,body{                margin:0px;                padding: 0px;            }            #main{//设置轮播界面大小为图片大小                position: relative;                overflow: hidden;                height:500px;                width: 750px;            }            #main ul{                position: relative;                float:left;                width:1000%;//拓宽宽度，让图片能完整float在一行无需换行             }            #main ul li{                list-style: none;                float: left;            }            #main ul li img{                list-style: none;            }            #main ul li img{                width: 750px;                height: 500px;            }            #pot{                position: absolute;                width: 100%;                text-align: center;            }            #pot a{                cursor: pointer;                float: left;                width: 10px;                height: 5px;                margin-left: 30px;                background-color: #808080;                margin-top: 450px;            }            #pot a.active,#pot a:hover{                background-color: white;            }            #pot ul li a.current{                background-color: white;            }        </style>    </head>    <body>        <div id="main">            <ul>                <li><img src="../../照片/01.jpg"></li>                <li><img src="../../照片/02.jpg"></li>                <li><img src="../../照片/03.jpg"></li>                <li><img src="../../照片/04.jpg"></li>                <li><img src="../../照片/05.jpg"></li>            </ul>            <div id="pot">            <ul>                <li><a class="current"></a></li>                <li><a></a></li>                <li><a></a></li>                <li><a></a></li>                <li ><a></a></li>            </ul>        </div>        </div>        <script>            var main = document.getElementById("main");            var ol = main.children[1].children[0];            var lilist = ol.children;            var ul = document.getElementById("main").children[0];            var leader = 0,target = 0,pic=0;            function touch(){                for(var i=0; i<lilist.length; i++){                lilist[i].index = i;                lilist[i].onmouseover = function(){                    for(var j=0; j<lilist.length;j++){                        lilist[j].children[0].className= "";                    }                    this.className = "current";                    target =- this.index*750;                    pic  = this.index;                }            }             setInterval(function(){             leader=leader+(target-leader)/10;             ul.style.left=leader+"px";},30);            }            timerId = setInterval(playNext,3200);            function playNext(){                //pic = lilist.children[0].index;                if(pic == lilist.length-1){                    pic = 0;                }else{                    pic++;                }                for(var j=0; j<lilist.length;j++){                        lilist[j].index = j;                        lilist[j].children[0].className= "";                    }                    lilist[pic].children[0].className = "current";                    target =- lilist[pic].index*750;                setInterval(function(){                leader=leader+(target-leader)/10;                ul.style.left=leader+"px";},30);            }            touch();        </script>    </body></html>
阅读全文
0 0