基于bootstrap电影网站设计

目前，随着计算机技术和通信技术的发展，网络的规模逐渐增大。网络的元素也在增加。有些是用它来进行交流的，有的用它作为商业用途，在网络上进行销售、收购、宣传等用途。使网络成为当今社会越来越重要的元素，而网站是网络的一大元素。所谓的网站（网站），是指在互联网（Internet）上，根据一定的规则，HTM⑶工具制作的用于收藏的有关具体页面内容的显示使用。简单地说，站点是一个通信工具，就像公告栏一样，人们可以通过网站来发布信息（信息），或者利用网站提供相关的Web服务（网络服务）。在IT行业迅速发展的今天，电影网站的建立已经成为电影发展必不可少的趋势。本设计将建立一个以宣传类型为目的的网站，将专注于针对电影的宣传与推广，让更多的网友能通过互联网了解、关注、支持电影以及电影事业的发展。电影网站作为一个新兴事物，是电影管理现代化发展的必然趋势。本网站在研究建立的同时，主要考虑的问题是：在“爱电影”网站的建立工作中，如何将传统的方式和现代化的方式更加有机的结合，使电影服务体系更完善。本网站制作并实现了一个电影网站的前台设计。此次设计主要就是完成电影网站中前台页面的设计，尽可能的将电影宣传信息第一时间发布，让浏览者更加清晰和详细的了解电影详情，也尽可能详细的展示、介绍不同类型的电影，同时为爱电影的提供一个交流的平台。在“爱电影”网站的设计过程中使用了HTML、DIV+CSSJavaScrip侍开发工具，开发软件为Dreamweaver8、PhotoshopCS5Fireworks8。通过对“爱电影”网站的需求分析、总体设计、详细设计和测试，最终完成了首页、各分类页、详情展示页、注册页、登录页等，完成了“爱电影”网站的前台设计。关键词：html计算机网站bootstrapcssTOC\o"1-5"\h\z摘要i目录ii第一章引言1项目开发背景1项目开发目标1项目开发的意义2论文结构3第二章页面制作相关技术介绍4CSS34HTML54javascript+Jquery5Axure6BootStrap8第三章bootstrap电影网站的需求与可行性分析10bootstrap电影网站的需求分析10bootstrap电影网站的可行性分析10第四章bootstrap电影网站的原型设计12bootstrap电影网站的页面结构12（所做项目名）的Axure原型设计13第五章电影网站的Bootstrap设计175.1电影首页页面的设计17第六章结论25参考文献26致谢27第一章引言项目开发背景现在中国大部分的家庭都喜欢在家里置办属于自己风格的家庭影院。但是，仍然有很人喜欢到电影院去看电影。因为家里的气氛毕竟不如影院好。所以，现代家庭影院的出现并不会让电影院没有生路。Bootstrap电影网站为了提高劳动的效率、节约成本、提高服务质量，我们小组开发了此款软件。用以方便影院的售票和客户的购买。通过这个软件，可以很快实现一些常用的服务，并保证无错、高效。Bootstrap电影网站每个社会服务系统都有自己的一套管理机制。当然,电影院也不除外。其实电影院的管理系统应该来说比其他的社会服务系统的管理要简单一点。电影院不外乎是引进电影，制定播放影片的时间表，买票，检票进场观看，还有就是一些数据管理方面的事。如工作人员管理，票务管理等等。为了工作机制简单有序，必然要引进一套管理系统项目开发目标.增强影片排行榜功能，从影迷角度，网站表现形式，管理使用的角度扩展功能。一般根据电影的票房情况排行，使电影爱好者可根据排行情况选择影片。.增强各影院电影预告排片功能，可以将华庭和中山两大影院每月的排片表通过后台一定格式的信息录入，前台将排片日期、影片名、影片简介、影片海报等相关内容以一定的模板样式显示出来。.增加网上订票系统，根据市民服务系统的要求，其中包括网上电影售票系统。详见《电影网上订票系统建设方案》。所在目前先可以预留该栏目，显示页面建设中。以便日后开发此应用系统。.完善会员系统，系统可实现统一会员管理平台，所有的论坛互动、影评、音像上传等需要会员系统的模块都可使用同一个会员管理系统。.增加影评互动模块，可根据会员系统，使网站的注册会员可以在影片介绍等文章后添加影片评论，发表自己的见解与观后感，实现互动性，且所有的评论后台都将具有审核程序，审核通过后才在前台显示，维护了网站的信息安全。.进行全面的页面的整改，将主页上图片切换动画模块，视频模块，广告位模块进行完善其特有的功能，将左侧嵌入式广告替换为其它内容。在首页设立更好的广告位，便于在推广活动中在此重点显示。.保留已有的好的风格，如：标题字体颜色亮显特色、网站检索模块等。站内检索功能，实现内容网站的全中文高速检索，搜索响应时间快。项目开发的意义一、全网开放全球现在约有15亿的用户接入了因特网，今后会更为壮大。通过建设一个网站，可以更好的展示个人/企业或者机构。在当前，门户博客、网店、微博、轻博等平台虽然可以更好的对自己展示。但是，网站仍然是最重要的自我展示的方案。因此，建设一个与自身形象相称或者更新颖的网站，是当前时代必不可少的选择！二、新型交流平台商业过程的很大一部分是商业交往。每个精明的商人都懂得进行广泛联系和接触的重要性。您可以通过网站在网络上每天24小时既便宜又轻松地向成千上万的人发“名片”。政府机构，可以通过网站这一高效开放的平台进行更好的与民互动，进一步的了解民生、民情、民意，切实完成“为人民服务”的宗旨。个人通过建设网站，能够更好的展示自。同时也会使自身的生活变得更加的充实。有些草根站长更是通过建设网站而发家致富。进行网站建设是今后每位网民必须的网上冲浪的过程。三、更快的了解信息资源在互联网时代，信息是处于一种爆炸的状态。在信息横流、大众被真假难辨的信息流所迷惑的时候，您的网站是否可以因为建设的十分独特而脱颖而出，并因此为您带来收益呢？另外，通过互联网，我们可以更好的得到网站用户的反馈信息，这将对我们的成长进步起到很大的作用。四、有利于营销我们可能很难让中央电视台详细描述我们的企业/机构/个人的最新情况，但是如果希望让人对这些都很感兴趣的话，可以让记者们宣传您的网站地址。任何地点的任何人只要能够访问互联网，他们就能成为您的网站的潜在访问者，并成为潜在的用户。当然，对于用户来说，如果可以提高他们的兴趣，那么您网站的粘性就更大了。五、全面互动体系虽然在显示中，人们通常不会24小时的与工作的客体保持沟通交流，但是在互联网上，这是完全可能的，通过互联网的一些应用，7*24的全天候交流互动完全是可能而且正常的。六、形象共振效应当我们网站的建设的十分成功的时候，将会为网站的使用者在网站访客的心目中加分，同时可能留住访客成为对我们“有价值的人"。反之，则会使得网站形同虚设，犹如浪费。论文结构本论文由6章组成。其中：第一章为：引言部分（从背景，目标和意义三个角度对项目进行剖析）第二章为：网页制作相关技术介绍（网上找寻资料）第三章为：bootstrap电影网站的需求与可行性分析（在网上查询并小组一起讨论）第四章为：bootstrap电影网站的原型设计（使用Axure进行了网页原型的设计，再进行分工不同的人做不同的工作）第五章为：bootstrap电影网站的bootstrap设计（本人做的是对应的网站首页的布局以及代码的编写）第六章为：结论（总结了这次网站设计以及编写的点点滴滴，大家一起努力，一起流汗，一起完成这次实训I）致谢：大家根据个人不同的理解，纷纷向老师和帮助自己的人表达感谢。第二章页面制作相关技术介绍CSS3CSSW层叠样式表(CascadingStyleSheet)。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS31CSSK术的升级版本，CSS3i§言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。主要功能：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面图2-1css3层叠样式效果图HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML的第五次重大修改(这是一项推荐标准、外语原文)2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。技术要点重要标记<video>标记定义和用法：</video>标签定义视频，比如电影片段或其他视频流。<audio>标记定义和用法</audio>标签定义声音，比如音乐或其他音频流。<canvas>标记定义和用法：<canvas>标签定义图形，比如图表和其他图像。HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。程序接口除了原先的DOMS口，HTML5曾力□了更多API,如：.用于即时2D绘图的Canvas标签.定时媒体回放.离线数据库存储.文档编辑.拖拽控制.浏览历史管理元素变化新的解析顺序新的元素：section,video,progress,nav,meter,time,aside,canvasinput元素的新属性：日期和时间，email,url。新的通用属性：ping,charset,async全域属性：id,tabindex,repeat。移除元素：center,font,strike。javascript+JqueryjavascriptJavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分,

广泛用于客户端的脚本语言，最早是在HTML标准通用标记语言下的一个应用）网页上使用，用来给HTMLM］页增加动态功能。在1995年时，由Netscape公司的BrendanEich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势，微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。HTMlMWoHTME素。cookies,包括创建和修改等。Node.js技术进行服务器端编程。Jquery动态特效AJAX通过插件来扩展方便的工具-例如浏览器版本判断渐进增强链式调用多浏览器支持，支持InternetExplorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对InternetExplorer6,7,8的支持）AxureAxureRP是一个专业的快速原型设计工具。表美国Axure公司；AxureRP是一个专业的快速原型设计工具。表美国Axure公司；RP贝^是RapidPrototypingAxureRP是美国AxureSoftwareSolution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。AxureRP已被一些大公司采用。AxureRP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等，另外，架构师、程序开发工程师也在使用Axureo鼠标及键盘交互功能支持更多的新特性，包括OnDoubleClick（双击），OnContextMenu（右击）,OnMouseDown鼠标按键按下），OnMouseUp鼠标按键松开），OnMouseMove鼠标指针移动），OnMouseHover（鼠标指车t经过），OnLongClick（鼠标长按）,OnKeyDown键盘按键按下），OnKeyUp（键盘按键松开）支持HTML的特性，以及更好的支持手机演示特性。新增部件样式控制Axure7对于部件修饰功能有较大的改善，包括支持圆角、阴影、描边等设置。更细化的部件属性更为丰富的部件属性，可以设置各种形状、样式，较AxureRP6.5单调的形状而言，也是一种惊喜。更多交互条件包括关闭指定窗口、设置锚点以及更为灵活的事件触发条件，对于移动互联网产品原型设计有很大帮助。图2-4Axure界面效果图BootstrapBootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTMLCSSJAVASCRIPT勺，它简洁灵活，使得Web开发更加快捷。它由Twitter的设计师MarkOtto和JacobThornton合作开发，是一个CSS/HTM眶架。Bootstrap提供了优雅的HTML®CSS®范，它即是由动态CSS语言less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA勺MSNBC微软全国广播公司）的BreakingNews^B使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX的端开源框架等，也是基于Bootstrap源码进行性能优化而来。外文名：Bootstrap类型：开源的用于前端开发的工具包设计者：MarkOtto和JacobThornton优点：兼容大部分jQuery插件原理Bootstrap框架的网格系统工作原理如下：1、数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）。如：<divclass="container"><divclass="row"></div></div>2、在行（.row）中可以添加列（.column），但列数之和不能超过平分的总列数，比如12。如：<divclass="container"><divclass="row"><divclass="col-md-4"></div><divclass="col-md-8"></div>3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器（.row）的直接子元素4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距（padding）的影响功能栅格系统栅格系统与著名的960Grid大同小异，不过960Grid默认是16栏、940像素宽，由于LESS带来的动态语言特性（变量、函数等），可以通过配置几个参数，自定义栅格。因为抛弃了对老旧浏览器的支持，可以直接用：last-child将最后一栏的margin-right去掉，这也是它与960Grid的区别之一。字体样式字体风格比较明显，标题、<em><strong>、<b><i>以及<address>和<blockquote>等语义标签都配了一些默认样式。然后是列表，通过.unstyled类样式获得样式充值效果，这个方式比较实用，特别是网站是以内容为主的时候。代码块也比较朴素，借鉴了GoogleCodePrettify风格。标签样式设计得比较贴心，风格趋于内敛。多媒体展现多媒体列表其实也比较简单，定义了3种缩略图尺寸：330像素X230像素、210像素X150像素和90像素X90像素。表格的样式也是简约风格。表单Bootstrap对表单进行了比较充分的定制，风格比较鲜明，label左浮动，圆角输入框，正确、错误的状态，表单legend的字号，前缀字符，输入、复选框等。文件选择比较朴素，没有提供更个性的解决方案，要想实现更个性的解决方案，需要与JavaScript配合设计。表单的按钮也十分细致，效果如图1-3所示。导航等网站的全局导航栏保持一致，使用样式实现背景色渐变，固定在头部，因此不需要考虑浏览器兼容问题。止匕外，还实现了提示、警告、弹出对话框设计风格的统一。以上样式的部分是Bootstrap框架的核心。在代码上，基本把样式重置与定制都做了，上述内容，除了比较明显的组件（如面包屑、翻页等），基本都直接用标签作选择器。有许多风格是利用CSS3羊式属性设计出来的，最明显的莫过于背景色渐变与圆角。因此，对于图省事、不介意早期浏览器的效果，不需要考虑IE6的开发者，Bootstrap是个好选择，因为它省时省力，而且美观大方。在样式之外，Bootstrap还提供了十几个常用的JavaScript插件，如模态对话框、下拉菜单、滚动监听、标签页、工具提示等jQuery插件。第三章bootstrap电影网站的需求与可行性分析bootstrap电影网站的需求分析电影购票系统，具有操作简单进入页面，选择好用户需求，再选择好座位，点击确认购买便可。具有实用价值本网站不需要购买，审核，具有较好的实用性，存在很高的使用价值。可靠性高本网站和多家电影院合作，不存在欺骗，欺诈等现象，且对会员的各种信息进行加密，不会存在泄漏会员的个人信息。bootstrap电影网站的可行性分析网站功能模块可行性首页是客户打开网页，图片自动旋转木马，使用JavaScript展示宣传片。要呈现给用户的第一时间，充满“爱电影”的网站亮点，吸引用户。1、电影首页：这个模块是在网站上的电影分类的，通过对电影的分类来找到用户想要找到的电影。2、电影新闻：本模块主要宣传最新电影新闻广播、电影宣传图片轮播。3、电影商城栏目：这个模块主要是为动画电影玩具及相关产品展示。4、电影社区论坛：这个模块主要是热爱电影的人，可以交换观看体验，讨论电影的细节，并一起观看影片的互动电影。5、电影电视节：该模块主要想去电影院观影提供城市院线电影的具体细节，如一部电影，名字起的时间，特定的地点，查看提供便捷服务。社会可行性分析近年来，随着中国国民经济的不断发展，人民生活水平不断提高，人均可支配收入不断增加，人们的消费需求和消费也越来越多。据相关统计分析，在2014全国电影票房收入约100亿元，在2013,电影票房同比增长约44%强劲增长的基础上，同比增长约60%改革开放以来，全国城市票房已经增加了约10倍，平均涨幅超过35%今年的房屋总量占比,国内电影票房达57亿元左右，占全年票房的55位右。包头市，总人口，城市人口近万。目前，共有约10家电影院，平均每2000万人影院数，包头地区没有一家可以提供电影信息宣传推广的电影网站。所以分析认为，电影网站的建立，有望借此机会大力推广，以满足日益增长的电影行业的宣传工作。因此，建立电影网站的前景是非常乐观的技术可行性分析1、细化网站目标。具体目标的技术可行性分析。电影信息摘要，了解网站建设的目标和具体要求，功能实现中的每一个具体的目标和功能的技术，同时也考虑到需要什么条件和多少人需要实现，并列出每个具体目标的内容，任务列表。2、网站可用性分析。网站的设计要求使它易于使用，而不仅仅是一个简单的信息和安排数组。此要求与网站的布局和服务器的功能有关。3、网站的互动分析。互动是现代网站发展的趋势，网站的互动性能可以提高网站的处理功能和存储容量的需求，内部结构设计可以相应调整。4、网站的性能分析。网站的用户数量随着网站的性能和功能的不断变化，在保证网站性能的前提下，不断满足更多用户的需求，并不断地进行规划、设计和系统维护。站点的整体性能一般通过站点的响应时间和处理时间以及平均用户等待时问和系统输出来衡量。因此，为了提高网站的性能，可以通过调查用户的数量和信息处理量来确定网站服务器的功能。

第四章bootstrap电影网站的原型设计bootstrap电影网站的页面结构这部分请添加一定的文字叙述，介绍网站页面构成，每个页面的大概功能图4-1表4-1网站设计思想表文件名内容index.htmlXXXXXXXXXXXXX登录如有帐号直接登录，否则注册首页点击登录，跳转到首页，查看本电影站放映的电影购票点击购票系统，选择影片进行购票

（所做项目名）的Axure原型设计■于bootstrap电影网站设计图4.2-1此页面为登录页面点击登录按钮，则跳转到首页,如图此页面为登录页面点击登录按钮，则跳转到首页,如图4.2-3点击注册页面则跳转至注册页面，如图册页面则跳转至注册页面，如图4.2-2注册页面Y明鼻.注册页面Y明鼻.利工学・作邙1J汽E静〜本-・M・・・AKIS4T?.期1**SnS曰41-与FuHtiAr--—修匕行――■wid『-，a)♦Mefg.睥.品理事?h匹邛二军r皿至"kownr*h3randWW方字nene-,J1■富司斗丁耳闻3・鼬，而|『<■Vw4窜日金.・■咽E/-£2"REIb,rn.®4'<度.t・z打算ia事■7：！餐7s餐7s哈P-IQ图4.2-2此页面为注册页面，用户填写注册资料，填写完整后点击提交按钮，则系统判断是否按照要求填写完整，如是，则显示隐藏框“注册成功”等待两秒后，跳转至登录页面如图图4.2-1并自动填写会员名和密码。如否，则弹出提示框：“请完整填写资料”

江事理出Gewara格瓦拉日电崽sfinnvfWr・租"■3♦XW»K蕾中.不左rf•1010-1068江事理出Gewara格瓦拉日电崽sfinnvfWr・租"■3♦XW»K蕾中.不左rf•1010-1068够瓦担皿生璃w«图4.2-3此页面为首页，当用户登录成功后，将跳转至此页面，此页面有导航功能,下拉菜单，选择器，和图片轮播功能等。其部分交互页面如图4.2-4

图片轮播j9显球单击时・8用例1弓在当前婷口打开赃案J/每两静入时J界用伊!1夕设量山到停匕循环改到停Lt精环।S1到写匕精球J«威项移出时・昂用傀1手设里d1到b-Jext同左福高out500ns向左百高in500ms———精齐司导2000定秒।d2到Wxt自动脩环傕环良嗝工00口电此s1副Next向无涓就out5gli号间正滑中in500ms同交雁环菌球耳隔2口00钊＞过志面板CC态阿可开普用就熟面做司痣动动态面板无霜来园版整近51也为向左海朝向右港碓裁A时.甫弱1胸没隹d1到Next何丘港就out5Cams向左滑动in500rriE=这谓琉指琼京喝2000钮；心SINext目动情环睛碍如0。孰.M到z2更参普中图4.2-4(1)■"?思标单击问J,用倒1手四川乳网白亢同壬滑前014500例;_^入；£出力500值自前相瓦s1乳Next向三备动out500ms；Qik±in500ms自动笛环笛环亘展2000里也(P到Ne建目前蕾珏」/品检秘人因dA用例1手信各d1乳停止猎二R.d之乳停止宿队£1氢停止帚然・"?鼠标移出目」豆再的1岳波著d1到Next向主点意out500ms淡/；二土m503ms多意喟圻谑环亘泰2口口口室就四到随漓目前靖环岩环河隔NWQ至秩e1社Next向左滑动OLrtSOCrro四原由in5D0ms曰前f&环情杂，同枭2000里号更多事件图4.2-4(2)

，，理p*♦艮,■i».1，，理p*♦艮,■i».1।«iMi'.EjtE1'1月运可丰您所选择的电影图4.2-5此页面为选票，购票页面。用户将选择作为号，点击提交选择，则判断是否选择了座位，如果是，则弹出隐藏框“购票成功”，并停顿两秒后跳转至首页如否，则弹出隐藏框“请选择座位号”。第五章电影网站的Bootstrap设计5.1电影首页页面的设计此页面，采用div控件布局，将各个模块进行分区。其页面布局如下：导航栏左标题栏图片轮播右标题栏底部图5-1核心代码如下：布局Html代码<divclass="biankuang"style="width:1024px;height:768px"><divclass="dingbu"style="width:100%;height:30px;">顶部</div><divclass="zuobu"style="width:200px;height:100%;float:left;">左部</div><divclass="youbu"style="width:100%;height:100%;float:left;">右部</div></div>代码1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional/ZEN"/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>基于bootstarp电影网站设计</title><metaname="keywords"content="网站建设、网站优化”/><metaname="description"content="电影购票系统模板"/><linkhref="images/style.css"rel="stylesheet"type="text/css"/></head><body><divclass="content"><!--主体开始--><divclass="headtop"></div><divclass="headtop2"><!--主体顶部开始--><divclass="logo"></div><divclass="headr"><li><ahref="#">设为首页</a>|<ahref="#">加入收藏</a></li><li><imgsrc="images/tel.gif"width="258"height="31"/></li></div></div><!--主体顶部结束--><divclass="menu"><!--主体导航开始--><li><ahref="#">热映</a></li><liclass="line"></li><li><ahref="gsjj.html">影院</a></li><liclass="line"></li><li><ahref="fwxm.html">即将上映</a></li><liclass="line"></li><li><ahref="gcal.html">活动</a></li><liclass="line"></li><li><ahref="list.html">社区</a></li><liclass="line"></li><li><ahref="khly.html">客户留言</a></li><liclass="line"></li><li><ahref="zhaopin.html">电影购票</a></li><liclass="line"></li><li><ahref="lianxi.html">联系我们</a></li></div><!--王体导航结束-->代码2<divclass="slider3"><!--主体幻灯开始--><divclass="container"id="idTransformView2"><ulclass="sliderslider2"id="idSlider2"><li><imgsrc="images/banner.jpg"/></li><li><imgsrc="images/banner2.jpg"/></li><li><imgsrc="images/banner3.jpg"/></li></ul><ulclass="num"id="idNum2"><li>1</li><li>2</li><li>3</li></ul></div><scripttype="text/javascript">var$=function(id){return"string"==typeofid?document.getElementById(id):id;};varClass={create:function(){returnfunction(){this.initialize.apply(this,arguments);}}}Object.extend=function(destination,source){for(varpropertyinsource){destination[property]=source[property];}returndestination;}varTransformView=Class.create();TransformVtotype={//容器又•象，滑动对象，切换参数，切换数量initialize:function(container,slider,parameter,count,options){if(parameter<=0||count<=0)return;varoContainer=$(container),oSlider=$(slider),oThis=this;代码3this.Index=0;//当前索引this._timer=null;//定时器this._slider=oSlider;//滑动对象this._parameter=parameter;//切换参数this._count=count||0;//切换数量this._target=0;//目标参数this.SetOptions(options);this.Up=!!this.options.Up;this.Step=Math.abs(this.options.Step);this.Time=Math.abs(this.options.Time);this.Auto=!!this.options.Auto;this.Pause=Math.abs(this.options.Pause);this.onStart=this.options.onStart;this.onFinish=this.options.onFinish;oContainer.style.overflow="hidden";oContainer.style.position="relative";oSlider.style.position="absolute";oSlider.style.top=oSlider.style.left=0;},//设置默认属性SetOptions:function(options){this.options={//默认值Up:true,//是否向上(否则向左)Step:5,//滑动变化率Time:10,//滑动延时Auto:true,//是否自动转换Pause:2000,//停顿时间(Auto为true时有效)onStart:function。。,//开始转换时执行onFinish:function(){}〃完成转换时执行};Object.extend(this.options,options||{});},//开始切换设置代码4Start:function(){if(this.Index<0){this.Index=this._count-1;}elseif(this.Index>=this._count){this.Index=0;}this._target=-1*this._parameter*this.Index;this.onStart();this.Move();},〃移动Move:function(){clearTimeout(this._timer);varoThis=this,style=this.Up?"top":"left",iNow=parseInt(this._slider.style[style])||0,iStep=this.GetStep(this._target,iNow);if(iStep!=0){this._slider.style[style]=(iNow+iStep)+"px";this._timer=setTimeout(function(){oThis.Move();},this.Time);}else{this._slider.style[style]=this._target+"px";this.onFinish();if(this.Auto){this._timer=setTimeout(function(){oThis.Index++;oThis.Start();},this.Pause);}}},//获取步长GetStep:function(iTarget,iNow){variStep=(iTarget-iNow)/this.Step;if(iStep==0)return0;if(Math.abs(iStep)<1)return(iStep>0?1:-1);returniStep;},〃停止Stop:function(iTarget,iNow){clearTimeout(this._timer);this._slider.style[this.Up?"top":"left"]=this._target+"px";}};window.onload=function(){functionEach(list,fun){for(vari=0,len=list.length;i<len;i++){fun(list[i],i);}代码5varobjs2=$("idNum2").getElementsByTagName("li");vartv2=newTransformView("idTransformView2","idSlider2”,990,3,{onStart:function(){Each(objs2,function(o,i){o.className=tv2.Index==i"on":"";})},//按钮样式Up:false})；tv2.Start();Each(objs2,function(o,i){o.onmouseover=function(){o.className="on";tv2.Auto=false;tv2.Index=i;tv2.Start();}o.onmouseout=function(){o.className="";tv2.Auto=true;tv2.Start();}})}</script></div><!--王体幻灯结束--><divclass="maintop"></div><divclass="main1"><!--主体内容开始--><divclass="main_l"><!--主体左侧开始--><divclass="leftbt"><divclass="xwtxt">快速购票</div></div>代码6<divclass="leftbtnr"><li><ahref="#">电影首页</a></li><li><ahref="#">热映电影</a></li><li><ahref="#">即将上映</a></li><li><ahref="#">电影院</a></li><li><ahref="#">电影活动</a></li><li><ahref="#">电影质询</a></li><li><ahref="#">电影库</a></li><li><ahref="#">电影社区</a></li></div></div><!--主体左侧结束--><divclass="mr"><!--主体右侧开始--><divclass="mbrbt"><imgsrc="images/fwxm.gif"/></div><divclass="mrbtnr"><!--主体右侧内容开始--><divclass="mrnr"></div><divclass="fanye"><spanclass="disabled"><</span><spanclass="current">1</span><ahref="#?page=2">2</a><ahref="#?page=3">3</a><ahref="#?page=4">4</a><ahref="#?page=5">5</a><ahref="#?page=6">6</a><ahref="#?page=7">7</a>...<ahref="#?page=199">199</a><ahref="#?page=200">200</a><ahref="#?page=2">></a></div></div><!--主体右侧内容结束--></div><!--王体右伊结束--></div><!--主体内容结束--><divclass="foot"><br/>版权所有<br/>来源:<ahref="http:〃/"targe