轮播特效小项目总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了轮播特效小项目总结相关的知识,希望对你有一定的参考价值。

 

  首先谈谈关于还原设计稿学到的一些东西,比如说网页设计稿和交互效果做好了,拿给我们在网页上实现,那如何实现呢,我就说说自己的鄙见吧。

  第一,思考整个设计图的层次,比如说分别由哪些部分构成,针对这些“块”,怎么设计div的结构,怎么把静态页面有条理的编写出来。

  第二,思考如何实现设计图的交互效果,在逻辑上分析,比如用JS绑定哪些事件,采用什么样的函数实现怎么样的效果等等。

  第三,代码的优化性考虑,怎么让代码简洁明了,方便维护。

  以上就是我现在阶段对页面还原的一些看法,也许比较浅显,我也希望早日提升!

   

    然后现在总结具体的案例,首先我们要还原的是一个类似小米商城轮播图的一个小项目。

里面有以下知识点:

    1.图片显示区域的轮播效果,在div里的三张图片每3秒钟按顺序更换一次、两个按钮支持上一张,下一张图片的效果、图片右下角三个圆点支持点击第一个圆点显示第一张图片,点击第二个显示第二张、以此类推的效果。

  2.图片左侧的菜单栏,需要实现鼠标滑过this.菜单栏时背景颜色改变、子菜单紧靠出现在菜单栏的右侧。离开菜单栏,子菜单隐藏。鼠标停留子菜单,子菜单一直显示,鼠标离开子菜单,子菜单隐藏。

  3.静态页面中背景图,透明度,字体效果,div大小、定位、元素显示与隐藏、盒子间距的设置、左右对齐、隐藏溢出、阴影效果、z-index、元素的旋转、小图标的使用等等。

 

 技术分享

 

  技术分享 

实现过程以下

 

html层面:

技术分享
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>轮播图</title>
  6     <link rel="stylesheet" type="text/css" href="css/style.css">
  7 </head>    
  8 <body>
  9     <div class="main" id="main">
 10         <div class="menu-box"></div><!--左侧菜单的大盒子,用来设置透明度-->
 11         
 12         <div class="sub-menu hide" id="sub-menu"><!--右侧菜单选项的盒子-->
 13             <div class="inner-box">
 14                 <div class="sub-inner-box">
 15                     <div class="title">手机、配件</div>
 16                     <div class="sub-row">
 17                     <span class="bold mr10">手机通讯:</span>
 18                     <a href="">手机</a>
 19                     <span class="ml10 mr10">/</span>
 20                     <a href="" >手机维修</a>
 21                     <span class="ml10 mr10">/</span>
 22                     <a href="" >以旧换新</a>                    
 23                     </div>
 24                    
 25                 
 26                     <div class="sub-row">
 27                         <span class="bold mr10">手机配件:</span>
 28                         <a href="">手机壳</a>
 29                         <span class="ml10 mr10">/</span>
 30                         <a href="">手机存储卡</a>
 31                         <span class="ml10 mr10">/</span>
 32                         <a href="">数据线</a>
 33                         <span class="ml10 mr10">/</span>
 34                         <a href="">充电器</a>
 35                         <span class="ml10 mr10">/</span>
 36                         <a href="">电池</a>
 37                     </div>
 38                     <div class="sub-row">
 39                         <span class="bold mr10">运营商:</span>
 40                         <a href="">中国联通</a>
 41                         <span class="ml10 mr10">/</span>
 42                         <a href="">中国移动</a>
 43                         <span class="ml10 mr10">/</span>
 44                         <a href="">中国电信</a>
 45                     </div>
 46                     <div class="sub-row">
 47                         <span class="bold mr10">智能设备:</span>
 48                         <a href="">智能手环</a>
 49                         <span class="ml10 mr10">/</span>
 50                         <a href="">智能家居</a>
 51                         <span class="ml10 mr10">/</span>
 52                         <a href="">智能手表</a>
 53                         <span class="ml10 mr10">/</span>
 54                         <a href="">其他配件</a>
 55                     </div>
 56                     <div class="sub-row">
 57                         <span class="bold mr10">娱乐:</span>
 58                         <a href="">耳机</a>
 59                         <span class="ml10 mr10">/</span>
 60                         <a href="">音响</a>
 61                         <span class="ml10 mr10">/</span>
 62                         <a href="">收音机</a>
 63                         <span class="ml10 mr10">/</span>
 64                         <a href="">麦克风</a>
 65                     </div>
 66                 </div>
 67              </div>
 68         
 69         
 70             <div class="inner-box">
 71                 <div class="sub-inner-box">
 72                     <div class="title">电脑</div>
 73                     <div class="sub-row">
 74                        <span class="bold mr10">电脑:</span>
 75                        <a href="">笔记本</a>
 76                        <span class="ml10 mr10">/</span>
 77                        <a href="">平板</a>
 78                        <span class="ml10 mr10">/</span>
 79                        <a href="">一体机</a>
 80                     </div>
 81                     <div class="sub-row">
 82                        <span class="bold mr10">电脑配件:</span>
 83                        <a href="">显示器</a>
 84                        <span class="ml10 mr10">/</span>
 85                        <a href="">CPU</a>
 86                        <span class="ml10 mr10">/</span>
 87                        <a href="">主板</a>
 88                        <span class="ml10 mr10">/</span>
 89                        <a href="">硬盘</a>
 90                        <span class="ml10 mr10">/</span>
 91                        <a href="">电源</a>
 92                        <span class="ml10 mr10">/</span>
 93                        <a href="">显卡</a>
 94                        <span class="ml10 mr10">/</span>
 95                        <a href="">其他配件</a>
 96                     </div>
 97                     <div class="sub-row">
 98                        <span class="bold mr10">游戏设备:</span>
 99                        <a href="">游戏机</a>
100                        <span class="ml10 mr10">/</span>
101                        <a href="">耳机</a>
102                        <span class="ml10 mr10">/</span>
103                        <a href="">游戏软件</a>
104                     </div>
105                     <div class="sub-row">
106                        <span class="bold mr10">网络产品:</span>
107                        <a href="">路由器</a>
108                        <span class="ml10 mr10">/</span>
109                        <a href="">网络机顶盒</a>
110                        <span class="ml10 mr10">/</span>
111                        <a href="">交换机</a>
112                        <span class="ml10 mr10">/</span>
113                        <a href="">存储卡</a>
114                        <span class="ml10 mr10">/</span>
115                        <a href="">网卡</a>
116                     </div>
117                     <div class="sub-row">
118                        <span class="bold mr10">外部产品:</span>
119                        <a href="">鼠标</a>
120                        <span class="ml10 mr10">/</span>
121                        <a href="">键盘</a>
122                        <span class="ml10 mr10">/</span>
123                        <a href="">U盘</a>
124                        <span class="ml10 mr10">/</span>
125                        <a href="">移动硬盘</a>
126                        <span class="ml10 mr10">/</span>
127                        <a href="">鼠标垫</a>
128                        <span class="ml10 mr10">/</span>
129                        <a href="">电脑清洁</a>
130                     </div>
131                 </div>
132             </div>
133             <div class="inner-box">
134                 <div class="sub-inner-box">
135                     <div class="title">家用电器</div>
136                     <div class="sub-row">
137                        <span class="bold mr10">电视:</span>
138                        <a href="">国产品牌</a>
139                        <span class="ml10 mr10">/</span>
140                        <a href="">韩国品牌</a>
141                        <span class="ml10 mr10">/</span>
142                        <a href="">欧美品牌</a>
143                     </div>
144                     <div class="sub-row">
145                        <span class="bold mr10">空调:</span>
146                        <a href="">显示器</a>
147                        <span class="ml10 mr10">/</span>
148                        <a href="">柜式</a>
149                        <span class="ml10 mr10">/</span>
150                        <a href="">中央</a>
151                        <span class="ml10 mr10">/</span>
152                        <a href="">壁挂式</a>
153                     </div>
154                     <div class="sub-row">
155                        <span class="bold mr10">冰箱:</span>
156                        <a href="">多门</a>
157                        <span class="ml10 mr10">/</span>
158                        <a href="">对开门</a>
159                        <span class="ml10 mr10">/</span>
160                        <a href="">三门</a>
161                        <span class="ml10 mr10">/</span>
162                        <a href="">双门</a>
163                     </div>
164                     <div class="sub-row">
165                        <span class="bold mr10">洗衣机:</span>
166                        <a href="">滚筒式洗衣机</a>
167                        <span class="ml10 mr10">/</span>
168                        <a href="">迷你洗衣机</a>
169                        <span class="ml10 mr10">/</span>
170                        <a href="">洗烘一体机</a>
171                     </div>
172                     <div class="sub-row">
173                        <span class="bold mr10">厨房电器:</span>
174                        <a href="">油烟机</a>
175                        <span class="ml10 mr10">/</span>
176                        <a href="">洗碗机</a>
177                        <span class="ml10 mr10">/</span>
178                        <a href="">燃气灶</a>
179                     </div>
180                 </div>
181             </div>
182             <div class="inner-box">
183                 <div class="sub-inner-box">
184                     <div class="title">家具</div>
185                     <div class="sub-row">
186                        <span class="bold mr10">家纺:</span>
187                        <a href="">被子</a>
188                        <span class="ml10 mr10">/</span>
189                        <a href="">枕头</a>
190                        <span class="ml10 mr10">/</span>
191                        <a href="">四件套</a>
192                        <span class="ml10 mr10">/</span>
193                        <a href="">床垫</a>
194                     </div>
195                     <div class="sub-row">
196                        <span class="bold mr10">灯具:</span>
197                        <a href="">台灯</a>
198                        <span class="ml10 mr10">/</span>
199                        <a href="">顶灯</a>
200                        <span class="ml10 mr10">/</span>
201                        <a href="">节能灯</a>
202                        <span class="ml10 mr10">/</span>
203                        <a href="">应急灯</a>
204                     </div>
205                     <div class="sub-row">
206                        <span class="bold mr10">厨具:</span>
207                        <a href="">烹饪锅具</a>
208                        <span class="ml10 mr10">/</span>
209                        <a href="">餐具</a>
210                        <span class="ml10 mr10">/</span>
211                        <a href="">菜板刀具</a>
212                     </div>
213                     <div class="sub-row">
214                        <span class="bold mr10">家装:</span>
215                        <a href="">地毯</a>
216                        <span class="ml10 mr10">/</span>
217                        <a href="">沙发垫套</a>
218                        <span class="ml10 mr10">/</span>
219                        <a href="">装饰字画</a>
220                        <span class="ml10 mr10">/</span>
221                        <a href="">照片墙</a>
222                        <span class="ml10 mr10">/</span>
223                        <a href="">窗帘</a>
224                     </div>
225                     <div class="sub-row">
226                        <span class="bold mr10">生活日用:</span>
227                        <a href="">收纳用品</a>
228                        <span class="ml10 mr10">/</span>
229                        <a href="">浴室用品</a>
230                        <span class="ml10 mr10">/</span>
231                        <a href="">雨伞雨衣</a>
232                     </div>
233                 </div>
234             </div>        
235         </div>
236         <div class="menu-content" id="menu-content"><!--左侧菜单栏的盒子,用来做菜单内容。-->
237             <div class="menu-item">
238                 <a href="">
239                     <span>手机、配件</span>
240                     <i>&#xe665;</i>
241                 </a>    
242             </div>
243             <div class="menu-item">
244                 <a href="">
245                     <span>电脑</span>
246                 <i>&#xe665;</i>
247                 </a>
248             </div>
249             <div class="menu-item">
250                 <a href="">
251                     <span>家用电器</span>
252                     <i>&#xe665;</i>
253                     </a>
254             </div>
255             <div class="menu-item">
256                 <a href="">
257                     <span>家具</span>
258                     <i>&#xe665;</i>
259                     </a>
260             </div>    
261         </div>
262         
263         <div class="banner" id="banner">
264             <a href="">
265                 <div class="banner-slide slide1 slide-active"></div>
266             </a>
267             <a href="">
268                 <div class="banner-slide slide2"></div>
269             </a>
270 
271             <a href="">
272                 <div class="banner-slide slide3" ></div>
273             </a>
274         </div>
275         
276         <a href="javascript:void(0)" class="button prev" id="prev">    </a>
277         <a href="javascript:void(0)" class="button next" id="next">    </a>
278         
279             <div class="dots" id="dots">
280                 <span class="active"></span>
281                 <span></span>
282                 <span></span>
283             </div>
284         </div>
285     <script type="text/javascript" src="js/sprit.js"></script>    
286 </body>
287 </html>
View Code

    

  设置一个classname为main的div,放这个轮播图里所有的东西。然后设置一个classname为banner的div,放要轮播的三张图片。再然后设置三个图片,因为我们需要点击图片就能跳转链接的效果,所以在三个<a href=””>中放三个classname为banner-slide slide1(2、3)的div,来放背景图片。

  两个按钮用a标签写入,其中如果href="#",点击后会回到网页顶部,javascript:void(0)会没有任何反应。

  小圆点因为在同一行内显示,使用<span>标签,当然也是被一个div先包起来。

  左侧的菜单功能全在mian标签下,新加的子元素第一个div是设置一级菜单背景颜色的,第二个子元素div是一级菜单的内容。第三个子元素div是二级菜单的内容,设置背景图片、大小、位置。

  第一个子元素直接去设置样式。

  第二个子元素div:每行内容设置一个div,内容包裹在<a herf>中,内容有标题文字和小图标,文字用<span>,图标用<i>实现。

  第三个子元素div:给一个总的div,包含四个子菜单的内容。四个总菜单分别给四个div。菜单内容给一个div,在里面写二级菜单的具体内容,如上代码所述就不一一展开 

 

css样式

技术分享
  1 *{
  2     margin: 0;
  3     padding: 0;    
  4 }
  5 
  6 @font-face {
  7     font-family: ‘iconfont‘;
  8     src: url(‘../img/font/iconfont.eot‘); 
  9     src: url(‘../img/font/iconfont.eot‘) format(‘embedded-opentype‘),
 10     url(‘../img/font/iconfont.woff‘) format(‘woff‘),
 11     url(‘../img/font/iconfont.ttf‘) format(‘truetype‘),
 12     url(‘../img/font/iconfont.svg#iconfont‘) format(‘svg‘);
 13     }
 14     
 15 body{
 16     font-family:"微软雅黑";
 17     color:#14191e;
 18 }
 19 a:link,a:visited{
 20     text-decoration:none;
 21     color: #333; 
 22 }
 23 
 24 .main{
 25     width:1200px;
 26     height:460px;
 27     margin:30px auto;
 28     overflow: hidden;
 29     position: relative;
 30 }
 31 
 32 .banner{
 33     width:1200px;
 34     height:460px;
 35     overflow:hidden;
 36     position: relative;
 37 
 38 }
 39 
 40 .banner-slide{
 41     width: 1200px;
 42     height:460px;
 43     background-repeat: no-repeat;
 44 
 45 
 46 
 47 }
 48 
 49 .slide1{
 50         background-image: url("../img/bg1.jpg");
 51 }
 52 
 53 .slide2{
 54         background-image: url("../img/bg2.jpg");
 55 }
 56 
 57 .slide3{
 58         background-image: url("../img/bg3.jpg");
 59 }
 60 
 61 .button{
 62     position: absolute;
 63     height: 80px;
 64     width:40px;
 65     left: 244px;
 66     top: 50%;
 67     margin-top:-40px;
 68     background:url(../img/arrow.png) center center  no-repeat;
 69     transform: rotate(180deg);
 70 }
 71 
 72 .next{
 73     left: auto;
 74     right: 0px;
 75     transform:rotate(0deg);
 76 }
 77 
 78 .button:hover{
 79     background-color: rgb(81,78,85);
 80     opacity:0.8;
 81     filter:alpha(opacity=80);
 82 }
 83 
 84 .dots{
 85     position: absolute;
 86     right: 0;
 87     text-align: right;
 88     bottom: 24px;
 89     padding-right: 24px;
 90     line-height: 12px;
 91 }
 92 
 93 .dots span{
 94     display: inline-block;
 95     width: 12px;
 96     height:12px;
 97     border-radius: 50%;
 98     margin-left: 8px;
 99     background-color: rgba(7, 17, 27, 0.4);
100     cursor: pointer;
101     box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
102 }
103 
104 .dots span.active{
105     box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
106     background-color: #ffffff;
107 }
108 
109 .menu-box{
110     width: 244px;
111     height:460px;
112     position:absolute;
113     top: 0;    
114     left:0;
115     background: rgba(7,17,27,0.5);
116     opacity:0.5;
117     z-index:1;
118 }
119 .menu-content{
120     width: 244px;
121     height:454px;
122     position: absolute;    
123     left: 0;
124     top: 0;
125     z-index: 2;
126     padding-top: 6px;
127 }
128 
129 .menu-item{
130     height: 64px;
131     line-height: 66px;
132     font-size: 16px;
133     padding: 0 24px;
134     position: relative;
135 }
136 
137 .menu-item a:link,.menu-item a:visited{
138     color: #fff;
139 }
140 
141 .menu-item a{
142     display: block;
143     border-bottom: 1px solid rgba(225,225,225,0.2);
144     padding: 0 8;
145     line-height: 63px;    
146 }
147 
148 .menu-item i {
149     position: absolute;
150     right: 32px;
151     font-size: 24px;
152     top: 0;
153     font-family:"iconfont" ;
154     font-style: normal;
155     font-weight: normal;    
156 }
157 
158 .sub-menu{
159     width: 730px;
160     height: 458px;
161     border: 1px solid #d9dde1;
162     background: #fff;
163     z-index: 999;
164     position: absolute;
165     left: 244px;
166     top:0px;
167     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
168 }
169 
170 .inner-box{
171     width: 100%;
172     height: 100%;
173     background: url(../img/fe.png) no-repeat;
174     display: none;
175 }
176 
177 .sub-inner-box{
178     width: 652px;
179     margin-left: 40px;
180     overflow: hidden;
181 }
182 .title{
183     color:red;
184     font-size: 16px;
185     line-height: 16px;
186     margin: 28px 0 30px 0;
187     font-weight: bold;
188 }
189 
190 .bold{
191     font-weight: bold;
192 }
193 .mr10{
194     margin-right: 10px;
195 }
196 
197 .ml10{
198     margin-left: 10px;
199 }
200 
201 .sub-row{
202     margin-top: 20px;
203 }
204 
205 .hide{
206     display: none;
207 }
View Code

  这里主要就是写一下几个比较陌生的css属性设置,以后多注意这些属性的用法,一定要熟练掌握 

  1.下面三行代码是比较通用的一些样式,先写在CSS的最前面,清空各种默认格式。

  *{
  margin: 0;
  padding: 0;
  }

  body{
  font-family:"微软雅黑";
  color:#14191e;
  }
  a:link,a:visited{
  text-decoration:none;

  2.溢出overflow

  overflow: hidden;内容会被修剪,并且其余内容是不可见的。

  overfiow:auto;如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

  overfiow:scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

    3.定位

  position: relative;相对定位

  position: absolute;绝对定位

  绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。

  4.box-shadow

  基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

  对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}  

  box-shadow属性的参数设置取值:

  阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;

  X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;

  Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;

  阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

  阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

  阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。

  为了兼容各主流浏览器并支持这些主流浏览器的较低版本,在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-

box-shadow的形式。

 

  5.背景

  background   这个简写属性可以在一个声明中设置所有的背景属性:

  可以设置如下属性:

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image

  6.圆角

  border-radius: 50%;设置圆的形状。

  7.光标

  cursor 属性规定要显示的光标的类型(形状),该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

  curso:pointer; 光标呈现为指示链接的指针(一只手)

  8.display

  block: 块级元素 。 总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度。
  <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子

  inline:内联元素。和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。
  <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

  inline-block:行内块元素。应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性。

JS代码:

技术分享
 1 function byId(id){
 2   return typeof(id)==="string"?document.getElementById(id):id;
 3 }
 4 
 5 var index= 0,
 6   timer= null,
 7   pics = byId("banner").getElementsByTagName(‘div‘),
 8   dots = byId("dots").getElementsByTagName(‘span‘),
 9   menu  = byId("menu-content").getElementsByTagName("div"),
10   menus = menu.length,
11   subMenu=byId("sub-menu"),
12   innerBox = subMenu.getElementsByClassName("inner-box"),
13   menuItem = byId("menu-content").getElementsByClassName("menu-item");
14   len = pics.length;
15 
16 
17 function slideImg(){
18   var main = byId("main");
19   main.onmouseover = function(){
20       if(timer)    clearInterval(timer)
21   }
22 
23   
24   main.onmouseout = function(){
25       timer = setInterval(function(){
26           index++;
27           if (index >= len ){
28               index=0;        
29           }
30       changeImg();
31       },3000);
32   }  
33   main.onmouseout();
34   
35   for(var d = 0;d<len;d++){
36       dots[d].id= d;
37       dots[d].onclick=function(){
38        index=this.id;
39        changeImg();
40       }    
41   }
42   
43 }
44 
45 next.onclick=function(){
46     index++;
47     if(index>=len) index=0;
48     changeImg();
49 }
50 
51 prev.onclick=function(){
52     index--;
53     if(index<0) index=len-1;
54     changeImg();
55 }
56 
57 function changeImg(){
58      for(var i =0;i<len; i++){
59          pics[i].style.display="none";
60          dots[i].className="";
61      }
62      pics[index].style.display=‘block‘;
63      dots[index].className="active"; 
64 }
65 
66 slideImg();
67 
68 function button(){
69     for(var m =0;m<menus;m++){
70     
71         menu[m].setAttribute("data-index",m)
72      menu[m].onmouseover=function(){
73          var idx=this.getAttribute("data-index");
74          for(var j = 0;j<innerBox.length;j++){
75                subMenu.className="sub-menu";
76                  innerBox[j].style.display="none";
77                  menuItem[j].style.background="none";
78          }
79       innerBox[idx].style.display="block";
80       menuItem[idx].style.background="rgba(0,0,0,0.1)";
81      }
82     }
83     byId("menu-content").onmouseout=function(){
84         subMenu.className="sub-menu hide";
85     }
86     subMenu.onmouseover=function(){
87         this.className="sub-menu";
88     }
89     subMenu.onmouseout=function(){
90         this.className="sub-menu hide";
91     }
92 }
93     
94 button();
View Code

 

  几个关键

  一个是遍历所有的项,设置一个样式。当触发了什么事件,以触发这个事件的数组的数字为依托进行更改样式。这里有两个变量,一个是用来遍历所有的元素的,一个是用来确定当下触发事件的具体数组的。

  几个交互效果API  onmouseover 、 onmouseover、setInterval定时器、clearInterval清除定时器、onclick、this的内容、setAttribute、getAttribute、getElementsByClassName与getElementsByTagName的区别。

  

 











以上是关于轮播特效小项目总结的主要内容,如果未能解决你的问题,请参考以下文章

原生js实现的3个小特效(时钟轮播图选项卡)

小白项目-JavaScript实现轮播特效

总结jq的一些特效

11-项目:JS实现轮播图特效

js之pc端网页特效三

js之pc端网页特效三