javascript图片滚动demo

最新推荐文章于 2023-02-18 23:17:02 发布

吕招焕

最新推荐文章于 2023-02-18 23:17:02 发布

阅读量125

点赞数

分类专栏： html js

本文链接：https://blog.csdn.net/u011090104/article/details/109632724

版权

html 同时被 2 个专栏收录

16 篇文章 3 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

html代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>
    <link rel="stylesheet" href="style.css">
    <script src="./data.js"></script>
</head>
<body>
    <div class="banner">
        <ul id="banner_pic">
            <li><img src="./images/nodejs.png" alt=""></li>
            <li><img src="./images/react.png" alt=""></li>
            <li><img src="./images/webpack.png" alt=""></li>
        </ul>
        <ul id="button">
            <li class="fore"></li>
            <li class="back"></li>
            <li class="back"></li>
        </ul>
    </div>
</body>
</html>```

css代码块

```html
*{
    margin: 0px;
    padding: 0px;
}
.banner{
    width: 300px;
    height: 150px;
    margin: 200px auto;
    display: flex;
    overflow: hidden;
}
.banner>#banner_pic>li{
    list-style: none;
}
.show{
    display: block;
}
.hidden{
    display: none;
}
.banner>#button{
    position: absolute;
    display: flex;
}
.banner>#button>li{
    list-style: none;
    width: 20px;
    height: 20px;
    margin: 110px 0px;
    margin-left: 60px;
    border-radius: 10px;
}
.fore{
    background-color: red;
}
.back{
    background-color: #000000;
}

js代码块

window.onload = function(){

    function globalChange(){
        var index=0;
        var timer = setInterval(autoChange,3000);
        var pic_li = document.getElementById("banner_pic").getElementsByTagName("li");
        var button_li = document.getElementById("button").getElementsByTagName("li");

        for(var i=0; i<button_li.length; i++){
            button_li[i].onmouseover=function(){
                if(timer){clearInterval(timer);}
                for(var j=0; j<button_li.length;j++){
                    if(button_li[j]==this){
                        index=j;
                        pic_li[j].className="show";
                        button_li[j].className="fore";
                    }
                    else{
                        pic_li[j].className="hidden";
                        button_li[j].className="back";
                    }
                }
            }

            button_li[i].onmouseout=function(){
                
            }
        }

        function autoChange(){
            ++index;
            if(index==pic_li.length){
                index=0;
            }
            for(var i=0; i<pic_li.length;i++){
                if(index==i){
                    pic_li[i].className="show";
                    button_li[i].className="fore";
                }
                else{
                    pic_li[i].className="hidden";
                    button_li[i].className="back";
                }
            }
        }
    }
    globalChange();
}

吕招焕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript图片滚动demo

html代码块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片切换</title> <link rel="stylesheet" href="styl
复制链接

扫一扫