原生JS轮播图

思路:下层放轮播图片,图片上层放置小圆点,点击小圆点的时候图片随着切换。
具体代码如下:


<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; ifunction(){
                    for(var j=0; j0].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; j0].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>












你可能感兴趣的:(HTML/CSS,javascript)