原生JS轮播图

最新推荐文章于 2023-08-05 04:04:49 发布

DayDreamWMM

最新推荐文章于 2023-08-05 04:04:49 发布

阅读量335

点赞数 1

分类专栏： javascript HTML/CSS 文章标签：原生JS图片轮播

本文链接：https://blog.csdn.net/daydreamwmm/article/details/73565053

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML/CSS

8 篇文章 0 订阅

订阅专栏

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

<!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>

DayDreamWMM

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生JS轮播图

思路：下层放轮播图片，图片上层放置小圆点，点击小圆点的时候图片随着切换。具体代码如下： <!DOCTYPE ><html> <head> <meta charset="utf-8" /> <style> div,ul,li,img,body{ margin:0px;
复制链接

扫一扫