本例主要用div+css实现简单幻灯片动画，借助了一点JS代码，JS只需改变className即可应用非常简单，给大家学习简单的div+css幻灯片布局效果。
<div class="m-slide">
<ol>
<li class="z-crt"><a href="#"><img src="/images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/5.jpg" alt=""/></a></li>
</ol>
<span class="u-pointer"><i class="z-crt"></i><i></i><i></i><i></i><i></i></span>
</div>
<div class="m-slide m-slide-x">
<ol>
<li class="z-crt"><a href="#"><img src="/images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/5.jpg" alt=""/></a></li>
</ol>
<span class="u-pointer u-pointer-rt"><i class="z-crt"></i><i></i><i></i><i></i><i></i></span>
</div>
<div class="m-slide m-slide-y">
<ol>
<li class="z-crt"><a href="#"><img src="/images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="/images/5.jpg" alt=""/></a></li>
</ol>
<span class="u-pointer u-pointer-rt"><i class="z-crt"></i><i></i><i></i><i></i><i></i></span>
</div>
<!-- JS只需改变className（以下示例仅作参考）： -->
<script type="text/javascript">
(function(_slides){
each(_slides,function(_slide,i){
var _ctrls = _slide.getElementsByTagName('i');
var _lists = _slide.getElementsByTagName('li');
each(_ctrls,function(_ctrl,i){
_ctrl.onclick=function(){
each(_lists,function(_list,i){
delClass(_list,"z-crt");
});
each(_ctrls,function(_ctrl,i){
delClass(_ctrl,"z-crt");
});
addClass(_lists[i],"z-crt");
addClass(_ctrls[i],"z-crt");
}
});
});
function hasClass(_object,_clsname){
var _clsname = _clsname.replace(".","");
var _sCls = " "+(_object.className)+" ";
return (_sCls.indexOf(" "+_clsname+" ") != -1) ? true : false;
}
function toClass(_str){
var _str = _str.toString();
_str = _str.replace(/(^\s*)|(\s*$)/g,"");
_str = _str.replace(/\s{2,}/g," ");
return _str;
}
function addClass(_object,_clsname){
var _clsname = _clsname.replace(".","");
if(!hasClass(_object,_clsname)){
_object.className = toClass(_object.className+(" "+_clsname));
}
}
function delClass(_object,_clsname){
var _clsname = _clsname.replace(".","");
if(hasClass(_object,_clsname)){
_object.className = toClass(_object.className.replace(new RegExp("(?:^|\\s)"+_clsname+"(?=\\s|$)","g")," "));
}
}
function each(_objects,_fn){
for(var i=0,len=_objects.length;i<len;i++){
_fn(_objects[i],i);
}
}
})(document.getElementsByTagName('div'));
</script>/* 单片式幻灯-默认淡入淡出 */
.m-slide{position:relative;width:400px;height:250px;overflow:hidden;}
.m-slide ol,.m-slide li{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;}
.m-slide li{opacity:0;-webkit-transition:0.5s ease-out;-moz-transition:0.5s ease-out;-ms-transition:0.5s ease-out;transition:0.5s ease-out;-webkit-transition-property:opacity,left,top;-moz-transition-property:opacity,left,top;-ms-transition-property:opacity,left,top;transition-property:opacity,left,top;}
.m-slide li.z-crt{z-index:21;opacity:1;}
/* 水平滚动 */
.m-slide-x li{left:-100%;}
.m-slide-x li.z-crt{left:0;}
.m-slide-x li.z-crt ~ li{left:100%;}
/* 垂直滚动 */
.m-slide-y li{top:-100%;}
.m-slide-y li.z-crt{top:0;}
.m-slide-y li.z-crt ~ li{top:100%;}
/* 多点式幻灯指示控制器-默认底部居中 */
.u-pointer{position:absolute;bottom:10px;left:0;right:0;z-index:50;text-align:center;line-height:0;}
.u-pointer i{display:inline-block;width:10px;height:10px;margin:0 0 0 5px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(0,0,0,0.5);cursor:pointer;background:#ccc;}
.u-pointer i:first-child{margin-left:0;}
.u-pointer i:hover{background:#999;}
.u-pointer i.z-crt{background:#40a1d9;}
/* 居右 */
.u-pointer-rt{right:10px;left:auto;}
在线QQ：
