4详细设计

企业门户网站各功能的详细设计，使用AngularJS框架搭建网站的页面，配合后端使用的PHP和MySQL完成任务书上指导的任务，并添加了首次登陆闪屏彩蛋功能。

4。1网站前台设计

4。1。1首页

（1）页面概述

该页面是用户登录网站网址后显示的默认界面，也是网站的首页。主要功能为通过图片和文字向网站访客展示企业文化，办业宗旨，公司简介，产品特点，企业新闻动态和企业相关业态。

（2）详细介绍

图 4。1 轮播图

HTML

<!-- 轮播图 -->

<p class="banner">

<p id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

<li data-target="#carousel-example-generic" data-slide-to="1"></li>

<li data-target="#carousel-example-generic" data-slide-to="2"></li>

</ol>

<p class="carousel-inner banner-box" role="listbox">

<p class="item active">

<img src="img/banner-1。jpg"></p>

<p class="item">

<img src="img/banner-2。jpg"></p>

<p class="item">

<img src="img/banner-3。jpg"></p>

</p>

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span class="sr-only">Previous</span></a>

<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span class="sr-only">Next</span></a></p>

<p class="keywords"></p></p>

JS

$('。carousel')。carousel({

  interval: 3000,

  pause: 'none'

});

$('。first-page')。scrollspy({ target: '。navbar' });

首页的banner轮播图，用户可以点击图片左侧的左箭头按钮，图片将经过一段过度动画以后切换到上一张图片。点击右侧右箭头按钮，图片将同样经过一段过渡动画以后切换到下一张图片。图片下方的实心圆点表示当前图片所在位置，空心圆点表示还在等待中尚未切换为active状态的图片，当图片完成过渡动画后原先active状态的实心圆点将变为空心圆点，当前active状态图片所处的位置将由原先的空心圆点变为实心圆点。点击白点会跳转到相对应的图片。

使用bootstrap完成页面的排版，使用jQuery完成轮播图的循环轮播以及点选切换前后图片的功能。carousel方法中的参数interval用来设置轮播间隔时间，单位为毫秒；pause默认值为hover，既当鼠标移动到图片上时将完成该次动画并且停止图片轮播，现将其设为none，当鼠标移动到正在进行轮播动画的图片上时不影响其动画和轮播的进行。

HTML

<p class="header">

<nav class="navbar navbar-default navbar-static-top" role="navigation"> HTML5禾粒农场智能管理系统门户网站设计(5):http://www.youerw.com/jisuanji/lunwen_96771.html