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

使用技术:

  1. HTML

  1. css3

  1. 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;
}

喜欢的可以直接拷贝

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

顶呱呱的猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值