轮播图静态

链接: link.
静态轮播图效果图

静态轮播图代码

HTML代码,即轮播图静态框架

<div class="all" id='box'>
                 <div class="screen" id="scrren">//<!--装轮播图片的盒子-->
                     <ul id="uu">//轮播图片
                         <li>
                             <img src="images/banner.jpg" />
                         </li>
                         <li>
                             <img src="images/banner2.jpg" />
                         </li>
                         <li>
                             <img src="images/banner3.jpg" />
                         </li>
                         <li>
                             <img src="images/banner4.jpg" />
                         </li>
                         <li>
                             <img src="images/banner5.jpg" />
                         </li>
                     </ul>
                     <ol id="oo">//装小圆点的盒子
                     </ol>
                 </div>
                 //装左右箭头按键的盒子
                 <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
             </div>

静态轮播图样式

.all {
	width: 790px;
	height: 340px;
	position: relative;
}

.screen {
	width: 790px;
	height: 340px;
	overflow: hidden;
	position: relative;
}

.screen li {
	width: 790px;
	height: 340px;
	overflow: hidden;
	float: left;
}

.screen ul {
	position: absolute;
	left: 0;
	top: 0px;
	width: 4740px;
}
.all ol {
	position: absolute;
	right: 324px;
	bottom: 10px;
	line-height: 20px;
	text-align: center;
}

.all ol li {
	float: left;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #ccc;
	margin-left: 10px;
	cursor: pointer;
}

.all ol li.current {
	background: purple;
}
#arr {
	display: none;
}

#arr span {
	width: 40px;
	height: 40px;
	position: absolute;
	left: 5px;
	top: 50%;
	margin-top: -20px;
	background: #000;
	cursor: pointer;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	font-family: '黑体';
	font-size: 30px;
	color: #fff;
	opacity: 0.3;
	border: 1px solid #fff;
}
#arr #right {
	right: 5px;
	left: auto;
}

未完待续…