页面轮播

最新推荐文章于 2024-05-14 23:10:25 发布

Angle灬魔君

最新推荐文章于 2024-05-14 23:10:25 发布

阅读量410

点赞数

分类专栏：前端 js 页面轮播定时器文章标签： JS事件页面轮播

本文链接：https://blog.csdn.net/AMrss/article/details/95746997

版权

前端同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

页面轮播

5 篇文章 0 订阅

订阅专栏

页面轮播（似java的线程）

<style>
        *{
            padding:0;
            margin:0;
        }
        #player{
            position:relative;
            margin:100px auto 0;
            width:800px;
            height: 350px;
            display: flex;
            justify-content: center;
        }
        #pa{
            flex-grow:1;
            background:transparent center no-repeat;
            transition:all 1s ease;
        }
        #control{
            position: absolute;
            bottom: 0;
            list-style: none;
            width: 106px;
            height: 24px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        #control>li{
            width:14px;
            height:14px;
            border-radius:7px;
            background-color:#AAA;
        }
</style>

body里

<body>
    <div id="player">
        <a id="pa" href=""></a>
        <ul id="control">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //数据初始化
        var srcs=[
            {
                imgUrl:"imgs/beautify.png",
                url:"http//www.sina.com.cn"
            },{
                imgUrl:"imgs/heart.jpg",
                url:"http//www.sina.com.cn"
            },{
                imgUrl:"imgs/hospital.jpg",
                url:"http//www.sina.com.cn"
            },{
                imgUrl:"imgs/nurse.jpg",
                url:"http//www.sina.com.cn"
            },
        ];
        //声明
        var i = 0,t;    //var i = 0;var i = t;
        var clock;
        //获取元素对象
        var pa = document.getElementById("pa");
        var pi = document.getElementById("pi");
        var control = document.getElementById("control");
        var cs = control.children;
        //封装：数据切换（根据下标）
        function change(i){
            cs[i].style.backgroundColor = "#F40";
            cs[(i==0?3:i-1)].style.backgroundColor="#AAA";
            var s = srcs[i];
            pa.href = s.url;
            pa.style.backgroundImage = `url(${s.imgUrl})`;
        }
        //封装：启动时钟函数
        function start(){
            clock = setInterval(function(){
                if(++i>=srcs.length){
                    i = 0;
                }
                change(i);
            },3000);
        }
        //关闭时钟函数
        function stop(){
            t = i;
            clearInterval(clock);
        }
        //页面初始化：切换至下标0
        change(i);
        //调用启动时钟函数启动时钟
        start();
        //启动手动轮播，关闭自动轮播（回调）
        control.onmouseenter = stop;
        control.onmouseleave = start;
        //手动轮播
        for(const j in cs){
            cs[j].onmouseenter = function(){
                cs[i].style.backgroundColor = "#AAA";
                i = j;
                change(j);
            }
        }
    </script>
</body>