<!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); user-select: none; } .prev:active{ transform: scale(0.8); } .next:active{ transform: scale(0.8); } .next { right: 0; color: aliceblue; background-color:rgba(105,105,105,0.8); user-select: none; } 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-18 17:31:28 浏览: 129
-doctype-html-html-lang-en-dir-ltr-head-meta-name:
这是一个简单的网站首页的HTML代码,包括导航栏和一个轮播图。导航栏使用了无序列表(`ul`)和列表项(`li`),通过CSS样式设置了背景颜色和鼠标悬停时的效果。轮播图部分使用了绝对定位和JavaScript实现了自动切换和点击切换的功能。图片使用`img`标签显示,并设置了固定的宽度和高度。整个页面使用了一些CSS样式来设置布局和外观。
阅读全文