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

前端网页代码二级菜单,轮播
- 写回答
- 好问题 0 提建议
- 关注问题
- 邀请回答
-
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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报