使用JavaScript完成简单轮播图效果

顶呱呱的猫

已于 2023-03-05 10:43:31 修改

阅读量156

点赞数

文章标签： html5 css javascript Powered by 金山文档

于 2023-03-05 10:42:31 首次发布

本文链接：https://blog.csdn.net/raxi2021/article/details/129343226

版权

使用技术：

HTML

css3

JavaScript

效果视频：

代码部分：

HTML：

<!DOCTYPE html>
<html lang="UTF-8">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <title>轮播图</title>
</head>

<body>
    <!-- 导航栏 -->
    <ul class="ul-box">
        <img src="img/log.png" alt="" class="log">
        <li class="ul-li"> <a href="#">首页</a> </li>
        <li class="ul-li"> <a href="#">静态网页</a> </li>
        <li class="ul-li"> <a href="#">动态网站</a> </li>
        <li class="ul-li"> <a href="#">图片素材</a> </li>
        <li class="ul-li"> <a href="#">常见问题</a> </li>
        <li class="ul-li"> <a href="#">网页定制</a> </li>
        <li class="ul-li"> <a href="#">下载运行</a> </li>
    </ul>
    <div class="box" id="img-li">
        <div class="zb">
            <ol class="lo" onclick="alertFunc()">
                <img src="lo.png" alt="">
            </ol>

        </div>
        <div class="zb1">
            <ol class="lo1" onclick="alertFunc1()">
                <img src="lo2.png" alt="">
            </ol>
        </div>
        <img src="img/01.png" alt="" class="box-img" id="uu">
        <img src="img/02.png" alt="" class="box-img">

    </div>
</body>

</html>

css3：

* {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

/* 导航栏 */
.ul-box {
    width: 1460px;
    height: 100px;
    /* border: 1px solid; */
    margin: auto;
    /* 打开弹性布局 */
    display: flex;
    /* 设置间距 */
    gap: 40px;
    /* 居中 */
    justify-content: center;
}

/* li */
.ul-li {
    margin-top: 40px;

}
.ul-li:hover >a{
    color:#ff6700;
}
/* 超链接 导航栏 */
.ul-li>a {
    color: rgb(93, 93, 93);
    font-size: 15px;
}

/* log */
.log {
    height: 40px;
    margin-top: 30px;
}

/* 轮播图 */
.box {
    width: 1460px;
    height: 380px;
    /* border: 1px solid; */
    margin: auto;
    display: flex;
    overflow: hidden;
}

.box-img {
    width: 1460px;
    height: 100%;
    float: left;
    transition: all 2s;

}

.zb {
    width: 200px;
    height: 378px;
    /* border: 1px solid; */

    position: absolute;


}

.zb1 {
    width: 200px;
    height: 378px;
    /* border: 1px solid; */
    position: absolute;
    margin-left: 1255px;

}

.lo {
    width: 60px;
    height: 60px;
    background-color: rgba(224, 224, 224, 0.253);
    border-radius: 30px;
    margin-top: 160px;
    margin-left: 50px;

}

.lo:hover {
    background-color: #3b8aed;
}

.lo1 {
    width: 60px;
    height: 60px;
    background-color: rgba(224, 224, 224, 0.253);
    border-radius: 30px;
    margin-top: 160px;
    margin-left: 50px;

}

.lo1:hover {
    background-color: #3b8aed;
}

.lo>img {
    width: 60px;
    position: relative;
    left: -5px;
}

JavaScript：

// 设置定时器任务
setInterval(alertFunc, 6000);
setInterval(alertFunc1, 12000);
var yd = "-1460px";
var yd1 = "0px";
var data = 0;
function alertFunc() {
    document.getElementById("uu").style.marginLeft = yd;
}
function alertFunc1() {
    document.getElementById("uu").style.marginLeft = yd1;
}

喜欢的可以直接拷贝