<!DOCTYPE html> <html> <head> <title>网站首页</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0 0; padding: 0 0; } /* 导航栏样式 */ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } .login{ float: right; } /* 轮播图样式 */ .slideshow-container { position: absolute; top: 68px; left: 360px; margin: auto; height: 500px; width: 800px; } .mySlides { position: absolute; top: 0; left: 0; width: 800px; height: 500px; } .prev, .next { position: absolute; top: 50%; font-size: 30px; font-weight: bold; padding: 10px; cursor: pointer; z-index: 1; } .prev { left: 0; color: aliceblue; background-color:rgba(105,105,105,0.8); } .next { right: 0; color: aliceblue; background-color:rgba(105,105,105,0.8); } img{ height: 500px; width: 800px; } </style> <script src="js/jquery-1.12.4.js"></script> <script> var index=1; $(function(){ $('.prev').click(function(){ index--; if(index<1) index=3; $('#pic').attr('src','../images/0'+index+'.jpg'); }) $('.next').click(function(){ next() }) window.setInterval("next()",2500) $('.prev').mouseover(function(){ $(this).css('color','#000') $(this).css('background-color','rgba(105,105,105,0.5)') }).mouseout(function(){ $(this).css('color','') $(this).css('background-color','') }) $('.next').mouseover(function(){ $(this).css('color','#000') $(this).css('background-color','rgba(105,105,105,0.5)') }).mouseout(function(){ $(this).css('color','') $(this).css('background-color','') }) }) function next(){ index++; if(index>3) index=1; $('#pic').attr('src','../images/0'+index+'.jpg'); } </script> </head> <body> <!-- 导航栏 --> <ul> <li><a class="active" href="#home">首页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">大唐不夜城</a></li> <li><a href="#about">展点信息</a></li> <li class="login"><a href="#">登录</a></li> </ul> <!-- 轮播图 --> <div class="slideshow-container"> <div class="mySlides"> <img src="../images/01.jpg" alt="" id="pic"> </div> <a class="prev">❮</a> <a class="next">❯</a> </div> </body> </html>
时间: 2024-04-19 11:26:28 浏览: 164
-doctype-html-html-lang-en-dir-ltr-head-meta-name:
这段代码是一个简单的网站首页,包括导航栏和轮播图。导航栏使用无序列表(`ul`)和列表项(`li`)来实现,轮播图使用绝对定位和JavaScript来实现图片切换。
在这段代码中,轮播图部分包括一个容器(`.slideshow-container`),一个包含图片的容器(`.mySlides`),以及两个控制按钮(`.prev`和`.next`)。点击按钮或者定时器会触发切换图片的函数。
你需要将这段代码保存为一个 HTML 文件,并将相关的 CSS 文件和 jQuery 库文件引入。确保图片文件路径正确。
这只是一个基本的示例,你可以根据需要进行扩展和修改。如果你有任何其他问题,请随时提问。
阅读全文