JAVAWEB-js实现轮播图和二级菜单

最新推荐文章于 2024-05-17 06:14:41 发布
最新推荐文章于 2024-05-17 06:14:41 发布
阅读量2.7k 收藏 16
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42072733/article/details/81037665
版权

简单美食网站的demo

notice：1.二级菜单需设置绝对定位并将其z-index值加大，母栏设置相对定位

              2.轮播图部分设置定时器，通过改变函数来控制图片的原路径

成果展示：


      

<!DOCTYPE html>                                                                                                      
<html>                                                                                                               
                                                                                                                     
	<head>                                                                                                           
		<meta charset="utf-8">                                                                                       
		<title></title>                                                                                              
		<style type="text/css">                                                                                      
			#top {                                                                                                   
				width: 884px;                                                                                        
				height: 500px;                                                                                       
				margin: auto;                                                                                        
				/*border: 1px solid red;*/                                                                           
			}                                                                                                        
			#top ul {                                                                                                
				padding: 0;                                                                                          
				margin: auto;                                                                                        
			}                                                                                                        
			#top ul li {                                                                                             
				list-style: none;                                                                                    
			}                                                                                                        
			.f {                                                                                                     
				float: left;                                                                                         
			}                                                                                                        
			#top ul li a {                                                                                           
				text-decoration: none;                                                                               
				display: block;                                                                                      
				padding: 4px 10px;                                                                                   
				background-color: lightblue;                                                                         
				width: 200px;                                                                                        
				height: 50px;                                                                                        
				text-align: center;                                                                                  
				border-right: 1px solid white;                                                                       
				line-height: 50px;                                                                                   
			}                                                                                                        
			#sub {                                                                                                   
				display: none;                                                                                       
				position: absolute;                                                                                  
				z-index: 999;                                                                                        
			}                                                                                                        
			#meum:hover #sub {                                                                                       
				display: block;                                                                                      
			}                                                                                                        
			#meum:hover #meum a {                                                                                    
				color: yellow;                                                                                       
			}                                                                                                        
			#left {                                                                                                  
				width: 230px;                                                                                        
				height: 440px;                                                                                       
				float: left;                                                                                         
				margin-top: 10px;                                                                                    
				margin-right: 10px;                                                                                  
				background-color: burlywood;                                                                         
				border: 1px solid black;                                                                             
			}                                                                                                        
			.left li {                                                                                               
				width: 230px;                                                                                        
				height: 80px;                                                                                        
				background-color: white;                                                                             
				text-align: center;                                                                                  
				line-height: 100px;                                                                                  
				border-bottom: 1px solid black;                                                                      
				0 position: relative;                                                                                
			}                                                                                                        
			#right {                                                                                                 
				float: right;                                                                                        
				margin-top: 10px;                                                                                    
				width:630px ;                                                                                        
				height:440px ;                                                                                       
				/*border: 1px solid yellow;*/                                                                        
			}                                                                                                        
			#meum {                                                                                                  
				position: relative;                                                                                  
			}                                                                                                        
			#clear {                                                                                                 
				clear: both;                                                                                         
			}                                                                                                        
		</style>                                                                                                     
		<script type="text/javascript">                                                                              
			function init() {                                                                                        
				//				定时操作                                                                                 
				setInterval("change()", 2000);                                                                       
			}                                                                                                        
			var i = 0;                                                                                               
                                                                                                                     
			function change() {                                                                                      
				i++;                                                                                                 
				document.getElementById("first").src = "picture/" + i + ".jpg";                                      
				var j=i+3;                                                                                           
				document.getElementById("second").src = "picture/" + j + ".jpg";                                     
				if (i == 3) {                                                                                        
					i = 0;                                                                                           
				}                                                                                                    
			}                                                                                                        
		</script>                                                                                                    
                                                                                                                     
	</head>                                                                                                          
                                                                                                                     
	<body οnlοad="init()">                                                                                           
		<div id="top">                                                                                               
			<ul>                                                                                                     
				<li class="f"><a href="">我的首页</a></li>                                                               
				<li id="meum" class="f"><a href="">个人中心</a>                                                          
					<ul id="sub">                                                                                    
						<li><a href="">我的资料</a></li>                                                                 
						<li><a href="">修改密码</a></li>                                                                 
					</ul>                                                                                            
				</li>                                                                                                
				<li class="f"><a href="">我的相册</a></li>                                                               
				<li class="f">                                                                                       
					<a href=""> </a>                                                                                 
				</li>                                                                                                
			</ul>                                                                                                    
			<div id="left">                                                                                          
				<ul class="left">                                                                                    
					<li>全部分类</li>                                                                                    
					<li>我的美食</li>                                                                                    
					<li>休闲娱乐</li>                                                                                    
					<li>爱购物</li>                                                                                     
				</ul>                                                                                                
			</div>                                                                                                   
			<div id="right">                                                                                         
				                                                                                                     
				<img src="picture/1.jpg" id="first" style="width:300px ; height:440px; margin-left:10px; "/>         
				<img src="picture/4.jpg"  id="second" style="width:300px ; height:440px; margin-left:10px ;"/>       
				                                                                                                     
			</div>                                                                                                   
			                                                                                                         
				                                                                                                     
			                                                                                                         
		</div>                                                                                                       
                                                                                                                     
	</body>                                                                                                          
                                                                                                                     
</html>

Peppa7Pig
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端模板（轮播图排版）
qq_42769197的博客
11-09 3976
代码已经上传到码云https://gitee.com/cuteSeven/webPageExample.git 这是页面效果 这是html代码 在这里插入代码片 ```&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="v
带有导航条和轮播图效果的网站设计.zip
08-05
使用DW工具，带有轮播图效果和导航条的网站设计工程实训，有十余个静态网页组成，制作较为精美，可以评论进行了解查看
【JavaWeb】CSS实现旋转木马轮播图
TechnicalXiaobai的博客
07-16 1384
轮播图、CSS、前端
Bootstrap（导航栏&轮播图&按钮组&画像）
weixin_56996467的博客
04-01 1399
目录 准备工作 一、导航栏 二、轮播图 三、按钮组 准备工作 将Bootstrap的js库和css样式都导入到项目中 一、导航栏 HTML代码： <!-- 导航条组件 --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- 固定容器 --> <div class="container"> <a class="navbar...
Web前端最全零基础也能学会，原生JS实现图片轮播（附源码，拿去即用），我的面试经历作文
最新发布
2401_84418883的博客
05-17 780
冒泡排序选择排序快速排序二叉树查找: 最大值、最小值、固定值二叉树遍历二叉树的最大深度给予链表中的任一节点，把它删除掉链表倒叙如何判断一个单链表有环由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！相框3. CSS 样式（index.css）margin: 0;padding: 0;h1{img {.all {.inner {
Bootstrap实战练习---模仿前端网页(导航栏+轮播图+Media)
Season CSDN博客
07-24 1508
Bootstrap实战—模仿前端网页 原网页效果图 连接 我的网页效果 -我的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initi..
超详细轮播图的三种实现方法html+css+javascript
qq_45654741的博客
07-29 6755
带箭头焦点轮播图js完成版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Carousel</title> <link rel="stylesheet" href="css/index.css"> <!-- 先引入animate.js --> <script src="js
jQuery实现轮播图及其原理详解
12-09
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...
JavaWeb-实现登录和注册功能
02-27
这个登录和注册的功能是基于JavaWeb应用场景开发的，本项目已有非常完整的项目逻辑和相关工程文件，现开源和大家共同学习。 码云免费下载链接：https://gitee.com/oh-its-yu-jun/JavaWeb-loginAndRegister
JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果
10-21
主要介绍了JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
JavaWeb-学院图书借阅系统，用于javaWeb考试前练习
04-13
【JavaWeb 学院图书借阅系统】是一个典型的基于JavaWeb技术开发的应用，主要用于帮助学生和教师在考试前熟悉和实践JavaWeb的相关知识。这个系统实现了图书管理、借阅、归还等一系列图书馆业务流程，是学习和理解...
web实现动态轮播图
07-01
利用HTML代码，实现web3D轮播图。包括js的使用，脚本的使用。
javaWeb-前端js基础
03-09
javaWeb-前端js基础
超好看的30款网站侧边栏设计
设计“1+2”，摹客就够了！
05-19 7892
网站的布局和导航十分重要，想要兼顾美观简洁的设计又要保障友好的用户体验，使用侧边栏导航会是一种不错的选择。目前，已经有大量的网站摈弃了传统的导航模式，改为使用侧边栏导航，今天我们精选了其中的30个作为灵感案例，一定会给你带来启发。
基于HTML5的移动Web应用——Bootstrap 样式案例：制作轮播图特效
sem00000的博客
05-13 3072
需求说明 使用轮播图插件布局网页的结构和样式 图片切换的等待时间是2秒 修改轮播图的样式，隐藏左右两边的控制箭头，不过点击左右两侧原来按钮的位置依然可以控制图片切换 运行效果 参考代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
淘宝轮播图--web前端20200309学习笔记
qq_44850917的博客
03-09 434
1.外边距合并问题：解决方法 浮动元素，绝对定位（固定）元素都不会触发外边距合并问题 2.综合案例-淘宝轮播图 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&gt...
【Java 进阶篇】深入浅出：Bootstrap 轮播图
繁依Fanyi的博客
10-22 1770
轮播图，也称为幻灯片，是一种交互式元素，通常用于在网页上轮流显示多个内容片段。它们可以包含图像、文本、按钮等，并具有自动播放和手动导航功能。轮播图是吸引用户视觉注意力的有力工具，经常用于网站的主页、产品展示、图片库等。在Bootstrap中，轮播图是通过Carousel组件来实现的。Carousel是Bootstrap的一部分，它提供了创建和管理轮播图的所有必要功能。下面，我们将逐步介绍如何使用Bootstrap创建和自定义轮播图。
web实现轮播图
qq_51730795的博客
05-18 2362
要简单实现轮播图，就需要用到js中的定时器。通过定时器来设定时间，从而达到轮换播放的效果。 具体代码如下： var n=1; function lb(){ n++; if(n>3) { n=1; } var img = document.getElementById("lunbo"); img.src="img"+n+".png"; } setInterval(lb,3000); 其中n代表循环中的个数，通过利用n的变换来更改所获得的img中的src属性，从而达到轮播的效果。 ..
JavaWEB课程
02-08
本套课程讲解JavaWEB编程：1、讲解HTML、CSS、JavaScript、DOM和BOM编程2、讲解Servlet技术3、讲解JSP技术4、讲解ajax和json技术5、讲解过滤器和监听器技术6、讲解数据库的多表操作，事务控制等
Javaweb实现轮播图.
06-10
Javaweb实现轮播图的方法有很多种，以下是其中一种实现方法： 1. 在JSP页面上引入jQuery库和轮播图插件，例如Slick。 ```html <!-- 引入jQuery库 --> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <!-- 引入Slick轮播图插件 --> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> ``` 2. 在JSP页面上添加轮播图的HTML结构，例如： ```html <div class="slider"> <div><img src="img/1.jpg"></div> <div><img src="img/2.jpg"></div> <div><img src="img/3.jpg"></div> </div> ``` 3. 在JSP页面上添加轮播图的JavaScript代码，例如： ```javascript $(document).ready(function(){ $('.slider').slick({ autoplay: true, // 自动播放 autoplaySpeed: 3000, // 自动播放间隔时间 dots: true, // 显示小圆点导航 arrows: false // 隐藏左右箭头导航 }); }); ``` 4. 在Java后台代码中，将轮播图所需的图片路径传递到JSP页面上，例如： ```java List<String> imgUrls = new ArrayList<>(); imgUrls.add("img/1.jpg"); imgUrls.add("img/2.jpg"); imgUrls.add("img/3.jpg"); request.setAttribute("imgUrls", imgUrls); request.getRequestDispatcher("index.jsp").forward(request, response); ``` 5. 在JSP页面中使用Java传递过来的图片路径，动态生成轮播图的HTML结构，例如： ```html <div class="slider"> <% List<String> imgUrls = (List<String>)request.getAttribute("imgUrls"); for(String imgUrl : imgUrls) { %> <div><img src="<%=imgUrl%>"></div> <% } %> </div> ``` 6. 运行Javaweb项目，即可看到实现了轮播图的效果。 注意：以上只是一种实现方法，还可以使用其他插件或自己编写JavaScript代码来实现轮播图。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值