js轮播图

最新推荐文章于 2024-04-24 10:07:36 发布

伪全栈小白成长记

最新推荐文章于 2024-04-24 10:07:36 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/qq_40962557/article/details/83000728

版权

javascript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

原生JS实现轮播效果。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myJs轮播图</title>
</head>
<body>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#box{
    margin: 150px auto;
    width: 600px;
    height: 400px;
    position: relative;
    overflow: hidden;
    /*border-radius: 50%;*/
}
#wrap{
    width: 600px;
    position: relative;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
}
    ul{
        list-style: none;
        font-size: 0;
    }
    img{
        width: 600px;
        height: 400px;
    }
    #buttons{
        position: absolute;
        width: 120px;
        height: 15px;
        right: 5px;
        bottom:30px;
    }
   #buttons span{
        width: 12px;
        height: 12px;
        display:inline-block;
        margin-left: 5px;
        border-radius: 50%;
        background-color: #eeeeee;
        cursor: pointer;
    }
</style>
<div id="box">
    <div id="wrap">
        <ul>
            <li><a href="#"><img src="img/1.jpg" alt="1.jpg"></a> </li>
            <li><a href="#"><img src="img/2.jpg" alt="2.jpg"></a> </li>
            <li><a href="#"><img src="img/3.jpg" alt="3.jpg"></a> </li>
            <li><a href="#"><img src="img/4.jpg" alt="4.jpg"></a> </li>
            <li><a href="#"><img src="img/5.jpg" alt="5.jpg"></a> </li>
        </ul>
    </div>
    <div id="buttons">
        <span class="on"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

</div>



<script>
    addLoadEvent(spanHover);
    addLoadEvent(move(0));
    var timec=null;
function addLoadEvent(func) {
    var oldonload=window.onload;
    if(typeof window.onload!="function"){
        window.onload=func;
    }else{
        window.onload=function () {
            oldonload();
            func();
        }

    }
}
function spanHover() {
    var buttons=document.getElementById("buttons");
    var  spanlist=buttons.getElementsByTagName("span");
    spanlist[0].style.background="green";
    spanlist[0].onmouseover=function (ev) {
        move(0);
    };
    spanlist[1].onmouseover=function (ev) {
        move(1);
    };
    spanlist[2].onmouseover=function (ev) {
        move(2);
    };
    spanlist[3].onmouseover=function (ev) {
        move(3);
    };
    spanlist[4].onmouseover=function (ev) {
        move(4);
    };

}
    function move(i) {
        var wrap=document.getElementById("wrap");
        var spanlist=document.getElementsByTagName("span");
        if(timec)
        {
            clearTimeout(timec);
        }
        for(var j=0;j< spanlist.length;j++)
        {
            if(i==j)
            {
                spanlist[i].style.background="green";
            }
            else
            {
                spanlist[j].style.background="white";
            }
        }
        wrap.style.top=(-i)*400+"px";
        timec=setTimeout(function () {
            if((i)<4)
            {
                move(i+1);
            }
            else {
                move(0);
            }
        },3000);
    }
</script>
</body>
</html>

在这里插入图片描述

伪全栈小白成长记

关注

0
点赞
踩
1

收藏

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

原生JS实现轮播效果。代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;myJs轮播图&lt;/title&gt;&lt;/head&gt;&lt;body&g
复制链接

扫一扫