本例主要用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;}