基于css和js的轮播效果图实现

基于css和js的轮播效果图实现

第一篇：效果图

1、先啥也不说直接上效果图

基于css和js的轮播效果图实现

第二篇：详细讲解

1、建立容器 #box 给其设置相关属性（注意：overflow:hidden;）

2、 Box中包括有ul li 以及a标签。在图片描述的时候，确保span所在层置顶。

3、

<div class="innerText"> </div>
<span class="innerText1">第一辆车</span>

另外，若不希望层的透明度影响字体的透明度，需要将其分离出来。

遇到的一个小问题：当所有样式设定后，发现a标签无法点击。应该将其设置为所有层的最顶端。（z-index:999）

Css样式如下：

<style type="text/css">
#box { position:relative;width:480px; height:300px; float: left; text-align: left;}
#box .imgList{ position:relative; width:480px; height:300px; overflow:hidden;}
#box .imgList li{ position:absolute; top:0; left:0; width:480px; height:300px;}
#box .countNum{ position:absolute; right:0; bottom:5px; z-index: 999;}
#box .countNum li{ width:20px; height:20px; float:left; color:#fff; border-radius:20px; background:#fff; text-align:center; margin-right:5px; cursor:pointer;opacity:1; filter:alpha(opacity=100);margin-bottom: 5px;}
#box .countNum li.current{ background:#f60; font-weight:bold; opacity:1; filter:alpha(opacity=70);}
.innerText { height: 50px; font:17.93px/30px"microsoft yahei"; width:480px;line-height: 50px; z-index:100;text-align: left;position: absolute;top: 250px;opacity: 0.4;color: #fff;background: rgb(76,76,76); }
.innerText1 { height: 50px; font:17.93px/30px"microsoft yahei"; width:460px;line-height: 50px;text-align: left;position: absolute;top: 250px;color: #fff;z-index: 998;text-decoration: none;margin-left: 20px;}
.innerText1 a{ text-decoration: none; color: #fff;}
.innerText1 a:hover{ color: #ff0; text-decoration: none;}
.innerText1 a :visited{ color: #fff; text-decoration: none;}
</style>

View Code