CSS3 animate fade效果下的幻灯切换效果实例页面

展示

代码

CSS代码：

.box {
    width: 500px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}
.list, .index {
    position: absolute;
}
.index {
    right: 0px;
    bottom: 0px;
}
.index i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 12px;
    background-color: #666;
    background-color: rgba(0,0,0,.6);
}
.index .on {
    background-color: #cd0000;
    background-color: rgba(255,0,0,.75);
}
            

HTML代码：

<div id="box" class="box">
    <a href="/" class="list fade out"><img src="//image.zhangxinxu.com/image/study/p/s500/ps1.jpg" /></a>
    <a href="/" class="list fade out"><img src="//image.zhangxinxu.com/image/study/p/s500/ps2.jpg" /></a>
    <a href="/" class="list fade out"><img src="//image.zhangxinxu.com/image/study/p/s500/ps3.jpg" /></a>
    <a href="/" class="list fade out"><img src="//image.zhangxinxu.com/image/study/p/s500/ps4.jpg" /></a>
    <div id="index" class="index"></div>
</div>   
            

JS代码：

var eleIndex = $("#index"), eleList = $("#box .list");
var funIndex = function() {
    var htmlIndex = '';
    eleList.each(function() {
        if ($(this).hasClass("out")) {
            htmlIndex += '<i></i>';    
        } else {
            htmlIndex += '<i class="on"></i>';
        }
    });
    eleIndex.html(htmlIndex);
};

var indexElement = -1, eleSlideIn = null;
$("#box").bind("click", function() {
    indexElement++;
    if (indexElement >= eleList.length) {
        indexElement = 0;
    }
    eleSlideIn && eleSlideIn.removeClass("in").addClass("out");
    eleSlideIn = $(eleList.get(indexElement)).removeClass("out").addClass("in");
    funIndex();
    return false;
}).trigger("click");