轮播特效小项目总结
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></i> 241 </a> 242 </div> 243 <div class="menu-item"> 244 <a href=""> 245 <span>电脑</span> 246 <i></i> 247 </a> 248 </div> 249 <div class="menu-item"> 250 <a href=""> 251 <span>家用电器</span> 252 <i></i> 253 </a> 254 </div> 255 <div class="menu-item"> 256 <a href=""> 257 <span>家具</span> 258 <i></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>
设置一个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 }
这里主要就是写一下几个比较陌生的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();
几个关键
一个是遍历所有的项，设置一个样式。当触发了什么事件，以触发这个事件的数组的数字为依托进行更改样式。这里有两个变量，一个是用来遍历所有的元素的，一个是用来确定当下触发事件的具体数组的。
几个交互效果API onmouseover 、 onmouseover、setInterval定时器、clearInterval清除定时器、onclick、this的内容、setAttribute、getAttribute、getElementsByClassName与getElementsByTagName的区别。
以上是关于轮播特效小项目总结的主要内容，如果未能解决你的问题，请参考以下文章