qq_63358005 2021-11-13 09:39 采纳率: 62.5%
浏览 81
已结题

前端网页代码二级菜单，轮播

以下是我写的代码和效果
菜单栏是点哪就跳在哪我想做个二级菜单和图片轮播
请问我该怎么写加在哪呢，（网页初学者马上要交作业了）拜托大神们眷顾了！

img

img

img


img

img

img

img

img

  • 写回答

2条回答 默认 最新

  • づGeranium☆う 2021-11-13 11:08
    关注
    <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>原生js实现幻灯片</title>

</head>

<style>
    .container {

        width: 100%;

        height: 500px;

        position: relative;

    }

    .content {

        width: 900px;

        height: 450px;

        position: relative;

        overflow: hidden;

        border: 1px solid seagreen;

        margin: 0 auto;

    }

    .slider-img {

        width: 900px;

        height: 450px;

        margin: 10px auto;

    }

    .slider-img img {

        vertical-align: top;

        width: 800px;

        height: 400px;

        margin: 10px 50px;

        display: block;

    }

    .left {

        margin-top: -300px;

        margin-left: 50px;

        width: 100px;

        height: 100px;



    }

    .left img,
    .right img {

        width: 100px;

        height: 100px;

    }

    .right {

        margin-top: -100px;

        margin-right: 50px;

        float: right;

        width: 100px;

        height: 100px;

    }



    .dot {

        position: relative;

        top: 23%;

        left: 43%;

        width: 50%;

    }

    .dotul {

        width: 450px;



    }

    .dotul li {

        width: 20px;

        height: 20px;

        background-color: seagreen;

        list-style: none;

        float: left;

        border-radius: 20px;

        margin-left: 15px;

        z-index: 999;

        cursor: pointer;

    }

    .active {

        background-color: orangered !important;

    }
</style>

<body>

    <div class="container" id="contaner">

        <div class="content" id="content">

            <div class="slider-img" id="slider">

                <a href="javascript:;">

                    <img src="http://music.0cafe.top/uploads/20200530/c78616f447b04c94cf2e3ab967a8d8c4.jpg" alt="1.jpg"
                        id="img">

                </a>

            </div>

        </div>

        <div class="btn">

            <div class="left" id="left">

                <a href="###">  左 </a>

            </div>

            <div class="right" id="right">

                <a href=" ###">右</a>

            </div>

        </div>

        <div class="dot">

            <ul id="ul" class="dotul">

                <li class="active"></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>



    </div>

    <script>

        //首先要获取元素

        var container = document.getElementById("container");

        var content = document.getElementById("content");

        var slider = document.getElementById("slider");

        var img = document.getElementById("img");

        var ul = document.getElementById("ul");

        var li = document.getElementsByTagName("li");

        var left = document.getElementById("left");

        var right = document.getElementById("right");

        var num = 0;

        var timer = null;





        //图片位置

        var arrUrl = ["http://music.0cafe.top/uploads/20200530/c78616f447b04c94cf2e3ab967a8d8c4.jpg", "https://419348.s81i.faiusr.com/2/101/AFEIlMwZEAIYACDw7I3jBSisr7fcBzDuBTjoAkBl.jpg", "http://music.0cafe.top/uploads/20200530/c78616f447b04c94cf2e3ab967a8d8c4.jpg", "https://1066381.s81i.faiusr.com/4/101/AFEIjYtBEAQYACDlup3vBSiyhJZ-MO4FOOgCQGU.png", "https://419348.s81i.faiusr.com/2/101/AFEIlMwZEAIYACDw7I3jBSisr7fcBzDuBTjoAkBl.jpg"];

        left.onclick = function (ev) {

            num--;

            if (num == -1) {

                num = arrUrl.length - 1;//如果到了第一张，返回最后一张

            }

            changeImg();

        };

        right.onclick = function (ev) {

            num++;

            if (num == arrUrl.length) {

                num = 0;//如果是最后一张，则返回第一张

            }

            changeImg();

        };

        //点击小圆点跳转到对应的图片

        for (var i = 0; i < arrUrl.length; i++) {

            li[i].index = i;

            li[i].onclick = function (ev) {

                num = this.index;

                changeImg();

            }

        }



        setTimeout(autoPlay(), 1000);//延迟1秒执行自动切换



        //鼠标移入清除定时器，鼠标移出恢复

        content.onmouseover = function (ev) {

            clearInterval(timer);

        };

        content.onmouseout = autoPlay;



        //图片切换函数

        function changeImg() {

            img.src = arrUrl[num];//改变图片src位置

            for (var i = 0; i < li.length; i++) {//改变原点样式

                li[i].className = "";

            }

            li[num].className = "active";

        }

        //设置定时器

        function autoPlay() {

            timer = setInterval(function () {

                num++;

                num %= arrUrl.length;

                changeImg();

            }, 2000);

        }

    </script>

</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 11月21日
  • 已采纳回答 11月13日
  • 创建了问题 11月13日

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度