javascript的MVC框架做导航和幻灯片

最新推荐文章于 2022-05-01 16:22:40 发布
最新推荐文章于 2022-05-01 16:22:40 发布
阅读量90 收藏
点赞数 1
分类专栏： javascript学习日记 文章标签： javascript mvc css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdcdhj/article/details/120981099
版权

网页布局 JavaScript CSS 导航栏 图片轮播
关键词由CSDN通过智能技术生成 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="javascript" src="js/Ademo.js"></script>
		<style type="text/css">
		html,body{
			margin: 0;
			padding: 0;
			font: "arial, helvetica, sans-serif";
			font-size: 12px;
		}
		#navbar{
			width: 800px;
			height: 30px;
			background-color: #71C371;
			color: white;
			margin: 0 auto;
		}
		#navbar ul{
			list-style: none;
			margin: 0;
			padding: 0;
			text-align: center;
		}
		#navbar ul li{
			width: 80px;
			height: 30px;
			text-align: left;
			vertical-align: middle;
			display: inline;
			margin: 5px 8px;
			font-size: 14px;
			line-height: 28px;
		}
		#navbar ul li a:link,a:hover,a:active{
			color: white;
			text-decoration: none;
		}
		#box{position: relative;width: 800px;height: 450px;background: #fff; margin: 0px auto;top:-5px;}
		#box .list{position: relative;width: 800px;height: 450px; overflow: hidden;}
		#box .list li{position: absolute;top: 0;left: 0;width: 800px;height: 450px;opacity: 0;filter: alpha(opacity=0);}
		#box .list li img{width: 100%;height: 100%;}
		#box .list li.current{opacity: 1;filter: alpha(opacity=100);}
		#box .count{position: absolute;right: 0;bottom: 5px;}
		#box .count li{text-align:center;color: #fff;float: left;width: 20px;height: 20px;cursor: pointer;margin-right: 5px;overflow: hidden;background:#f90;opacity: 0.7;filter: alpha(opacity=70);border-radius: 20px;}
		#box .count li.current{color: #fff;opacity: 1;filter:alpha(opacity=100);font-weight: 700;background: #f60;}
		</style>
	</head>
	<body>
		<script language="javascript">
			$(function(){
				//初始化MVC对象
				var MVC=MVC||{};
				//初始化MVC数据模型层
				MVC.model=function(){
					//内部数据对象
					var M={
						//XHR主函数
						xhr:function(type,url){},
						//如果要用XHR获取各类数据
						navdata:function(){},
						imgdata:function(){},
						textdata:function(){}
					};
					M.data={
						navBar:[{
							title:'主页',
							href:'index.html'
						},{
							title:'公司介绍',
							href:'gsjs.html'
						},{
							title:'菜品展示',
							href:'cpzs.html'
						},{
							title:'加盟店',
							href:'jmd.html'
						},{
							title:'加盟中心',
							href:'jm.html'
						},{
							title:'联系我们',
							href:'lxwm.html'
						}],
						imgShow:[{
							src:'img/1.jpg',
							alt:'第一张图片',
							href:'#'
						},{
							src:'img/2.jpg',
							alt:'第二张图片',
							href:'#'
						},{
							src:'img/3.jpg',
							alt:'第三张图片',
							href:'#'
						},{
							src:'img/4.jpg',
							alt:'第四张图片',
							href:'#'
						},{
							src:'img/5.jpg',
							alt:'第五张图片',
							href:'#'
						}]
					};
					M.conf={
						navBarCloseAnimate:false
					};
					return {
						getData:function(m){
							return M.data[m];
						},
						getConf:function(c){
							return M.conf[c];
						},
						setData:function(m,v){
							M.data[m]=v;
							return this;
						},
						setConf:function(c,v){
							M.conf[c]=v;
							return this;
						}
					}
				}();
				//初始化MVC视图层
				MVC.view=function(){
					var M=MVC.model;
					var V={
						createNavBar:function(){
							var html='',
							data=M.getData('navBar');
							if(!data||!data.length){
								return;
							}
							//创建视图容器
							var dom=$.create('div',{
								'id':'navbar',
								'class':'navbar'
							});
							//视图容器模板
							var tpl={
								container:[
									'<div class="navbar-inner"><ul>{#content#}</ul></div>',
								].join(''),
								item:[
									'<li>',
									'<a class="navbox" href={#href#}>',
									'{#title#}',
									'</li>'
								].join('')
							};
							//渲染全部导航模块
							for(var i=0,len=data.length;i<len;i++){
								html+=$.formateString(tpl.item,data[i]);
							}
							//在页面中创建导航视图
							dom.html(
								$.formateString(tpl.container,{content:html})
							).appendTo('body');
						},
						createImg:function(){
							var html='',
							data=M.getData('imgShow');
							if(!data||!data.length){
								return;
							}
							//创建图片容器
							var imgDom=$.create('div',{
								'id':'box',
								'class':'box'
							});
							//图片视图窗口模块
							var tplimg={
								container:[
									'<div class="img-inner"><ul class="list">{#content#}</ul>',
									'<ul class="count">',
									'<li class="current">1</li>',
									'<li>2</li>',
									'<li>3</li>',
									'<li>4</li>',
									'<li>5</li></ul></div>'
								].join(''),
								item:[
									'<li class="current">',
									'<a class="imghref" href={#href#}>',
									'<img src={#src#} alt={#alt#}/></a>',
									'</li>'
								].join('')
							};
							//渲染全部图片模块
							for(var i=0,len=data.length;i<len;i++){
								html+=$.formateString(tplimg.item,data[i]);
							}
							//在页面中创建图片视图
							imgDom.html(
								$.formateString(tplimg.container,{content:html})
							).appendTo('body');	
						}
					};
					return function(v){
						V[v]();
					}
				}();
				//初始化MVC控制器层
				MVC.ctrl=function(){
					var M=MVC.model;
					var V=MVC.view;
					var C={
						//导航栏模块
						initNavBar:function(){
							V('createNavBar');
						},
						initImgShow:function(){
							V('createImg');
							var aUl=$('ul','box');
							var aImg=aUl[0].getElementsByTagName('li');
							var aNum=aUl[1].getElementsByTagName('li');
							var timer=play=null;
							var i=index=0;
							for(i=0;i<aNum.length;i++){
								aNum[i].index=i;
								aNum[i].onmouseover=function(){
									show(this.index);
								};
							}
							$('#box').on('mouseover',function(){
								clearInterval(play);
							});
							$('#box').on('mouseout',function(){
								autoPlay();
							});
							function autoPlay(){
								play=setInterval(function(){
									index++;
									index>=aImg.length&&(index=0);
									show(index);
								},2000);
							}
							
							function show(a){
								index=a;
								var alpha=0;
								for(i=0;i<aNum.length;i++){
									aNum[i].className="";
									aNum[index].className="current";
									clearInterval(timer);
								}
								for(i=0;i<aImg.length;i++){
									aImg[i].style.opacity=0;
									aImg[i].style.filter="alpha(opacity=0)";
								}
								timer=setInterval(function(){
									alpha+=6;
									alpha>100&&(alpha=100);
									aImg[index].style.opacity=alpha/100;
									aImg[index].style.filter="alpha(opacity="+alpha+")";
									alpha==100&&clearInterval(timer);
								},50);
							}
						}
						
					};
					for(var i in C){
						C[i]&&C[i]();
					}
				}();
			});
		</script>
		
	</body>
</html>

最后做出来的成品样子
在这里插入图片描述

cdcdhj
关注
专栏目录
springMVC+img标签实现图片展示
gzc1221的专栏
03-10 4841
基本思路 html中的img标签请求，springmvc中的controller这层返回数据 前端代码 后台代码 ImageUtil /** * 获得指定文件的byte数组 */ public static byte[] getBytes(String filePath) { byte[] buffer = null; try {
.net mvc 下幻灯片代后台
06-22
综上所述，".NET MVC 下幻灯片代后台"涉及了ASP.NET MVC框架的基础知识，包括MVC架构、后台管理、数据操作、视图渲染和前端交互。开发者需要综合运用这些技能来构建一个高效且用户友好的幻灯片展示系统。
ASP.NET MVC 在项目中使用面包屑导航
weixin_30666943的博客
10-19 307
给框架添加一个面包屑导航 1.创建一个类 using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace SAS.Model.AdminCommon { public class BreadCrumbsModel { ...
JavaScript 移动和触摸框架
laokdidiao的专栏
04-14 7019
jQuery Mobile : 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。
JavaScript宝座：七大框架论剑
多多
06-28 523
原文链接：Rich JavaScript Applications – the Seven Frameworks　作者：Steven Sanderson 翻译：@李松峰　感谢 @温谦-此昵称太受欢迎 老师推荐。 一周前，Throne of JS大会在多伦多召开，这应该是我参加过的最有料也最不一样的一次大会。大会官网如是说： 加载整个页面，然后再“渐进增强”以添加动态行为，
Node.js：用JavaScript写服务器端程序-介绍并写个MVC框架
diandi5157的博客
01-28 117
(注：1、本文基于Node.js V0.3.6； 2、本文假设你了解JavaScript； 3、本文假设你了解MVC框架；4、本文作者：QLeelulu，转载请注明出处。5、本文示例源代码：learnNode.zip) Node.js是什么 Node让你可以用javascript编写服务器端程序，让javascript脱离web浏览器的限制，像C#、JAVA、Python...
JavaScript宝座：七大框架论剑（转载）
pucxin
12-30 127
一周前，Throne of JS大会在多伦多召开，这应该是我参加过的最有料也最不一样的一次大会。大会官网如是说： 加载整个页面，然后再“渐进增强”以添加动态行为，这种构建Web应用的方式已经不够好了。要想让应用加载快，反应灵敏，而且又引领潮流，必须彻底检讨你的开发手段。 这次大会邀请了七大JavaScript框架/库的创建人，他们济济一堂，面对面交流各自的技术理念。所谓七大框架/库...
JavaScript8大框架
Drifterkiten的博客
07-29 3879
  共识：IE6已死 在小组讨论中，大多数框架的创建者说，他们对IE浏览器的支持只限于7+（事实上，灰烬和AngularJS的起点是IE8，蝙蝠侠需要ES5“垫片”才能在IE9之前的IE版本中使用）。这也是大势所想：jQuery 2已经不打算支持IE9以下的旧版本IE了。 只有骨干和敲除还坚定支持IE6 +（我不清楚骨干的内部实现，但敲除会把IE6 / 7那些令人抓狂的渲染及事件方面的怪异行...
Ajax / Javascript 框架简介及集合列表
小狮子-专栏
02-15 1393
Ajax / Javascript 框架简介及集合列表 AJAX框架能够帮助我们快速开发能够通过JavaScript调用WebService（Server Page）的网页，而不必要提交整个页面。近来的web应用都使用AJAX来提高网页的可交互性和实现更好的功能。目前互联网上有上百个AJAX/JavaScript框架可供我们使用，这里所整理的是比较常用的128个，因为太多了，实在不好分类，请
JavaScript库资源
多看多听多总结
05-01 1631
包管理器 托管JavaScript库并提供用于获取和打包它们的工具。 npm - npm是JavaScript的包管理器。 Bower - 网络包管理器。 component - 用于构建更好的Web应用程序的客户端包管理。 spm - 全新的静态包管理器。 jam - 使用以浏览器为中心且与RequireJS兼容的存储库的包管理器。 jspm - 无摩擦浏览器包管理。 恩德 - 无库图书馆。 volo - 从模板创建前端项目，添加依赖项并自动生成项目。 Duo - 下一代软件包管理器，
slide:这张幻灯片说明了如何使用SpringMVC，Jasper Report，Struts2MVC和更多技巧
04-30
综上所述，这个幻灯片可能涵盖了Web开发中的关键技术和工具。SpringMVC作为后端MVC框架，处理HTTP请求和业务逻辑；JasperReport用于生成专业报表，增强数据可视化；Struts2则是另一种流行的Java Web框架，提供了MVC...
jquery mobile移动端幻灯片滑动切换效果
10-20
4. CSS样式定义了各个组件的布局和样式，如底部导航的固定位置和阴影效果，以及幻灯片内容区域的宽度和隐藏溢出内容的设置。 通过上述知识点，我们可以了解到如何在移动端实现幻灯片滑动切换效果，并且对实现这类...
presentations:在各种演示文稿中使用的幻灯片和代码
05-26
通过深入学习和理解这些幻灯片和代码示例，开发者可以更好地掌握在JavaScript项目中运用MVC模式的方法，从而提高代码的可读性和可维护性。在实际工作中，这将有助于团队协作，减少出错概率，并使项目更容易扩展和...
angular-slides-editor:角度幻灯片编辑器
06-28
**Angular Slides Editor** 是一个基于 AngularJS 框架的开源项目，专门用于创建和编辑幻灯片。这个编辑器允许用户通过直观的界面来构建动态、交互式的演示文稿，非常适合开发者、设计师以及教育工作者使用。由于其...
javascript用for循环生成div和img元素，再生成img的src属性，并添加到div元素里面
cdcdhj的博客
07-14 3336
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script language='javascript'> for(var i=0;i<5;i++){ var div=document.createElement('div');.
javascript input输入框带下拉菜单
cdcdhj的博客
11-01 2290
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input id="bar" list="country" type="text" /> <script language="javascript"> ~(function(){ va
javascript构造函数的调用方法和普通函数的调用方法
cdcdhj的博客
11-26 2261
···javascript function Person(name,age,job){ this.name=name; this.age=age; this.job=job; this.sayName=function(){ console.log(this.name); }; } var person=new Person(“jim”,26,“software eng”); Person(“jack”,33,“anan”);
phpstudy中apache设置跨域(头部请求模块开启)
cdcdhj的博客
12-26 1801
1.在phpstudy的配置文件httpd-conf,在头部添加 Header set Access-Control-Allow-Origin * 2.找到这行 #LoadModule headers_module modules/mod_headers.so 把#注释符去掉即可，我的是在115行.
简易JavaScript MVC框架实现教程
本文主要介绍了如何通过简单的实现方式构建JavaScript MVC（模型-视图-控制器）样式框架，适合初学者入门。作者分享了一种基于URL哈希值进行导航的方法，不需要使用像AngularJS或Ember这样的复杂框架。在MVC架构中：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值