精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

本例主要用div+css实现简单幻灯片动画,借助了一点JS代码,JS只需改变className即可应用非常简单,给大家学习简单的div+css幻灯片布局效果。

div+css实现简单幻灯片动画效果图

div+css实现简单幻灯片动画HTML代码

<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>

div+css实现简单幻灯片动画CSS代码

/* 单片式幻灯-默认淡入淡出  */
.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;}

在线Demo预览

Tags:DIV+CSS HTML CSS