图片轮转切换效果

Posted 2020-11-02 慕容冰菡

图片轮转切换效果

简介：

　　CSS3动画相关的几个属性有：transition, transform和 animation。分别理解为过渡，变换和动画。

　　transition指过渡，就是从a点都b点，是有时间的，是连续的，一般针对常规CSS属性；

　　transform指变换，如：旋转、缩放，偏移，与transition使用，但是，效果是机械的旋转移动，如果配合transition属性，就会很平滑。


　　animation指动画，详见：http://www.cnblogs.com/Michelle20180227/p/8680991.html

 

案例一：

CSS代码：

.trans_box{
    width: 400px;
    margin: 20px;
    overflow: hidden;
}
.trans_image_box {
    width: 2000px;
    height: 300px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.trans_image {
    width: 400px;
    float: left;
}
.trans_image_trigger {
    padding-top: 10px;
    text-align: center;
}

 

html代码：

<div class="trans_box">
    <div id="transImageBox" class="trans_image_box">
        <img class="trans_image" src="http://image.zhangxinxu.com/image/study/p/s500/ps1.jpg" />
        <img class="trans_image" src="http://image.zhangxinxu.com/image/study/p/s500/ps2.jpg" />
        <img class="trans_image" src="http://image.zhangxinxu.com/image/study/p/s500/ps3.jpg" />
        <img class="trans_image" src="http://image.zhangxinxu.com/image/study/p/s500/ps4.jpg" />
    </div>
    <div id="transImageTrigger" class="trans_image_trigger">
        <a href="#1">图片1</a>　<a href="#2">图片2</a>　<a href="#3">图片3</a>　<a href="#4">图片4</a>
    </div>
</div>

 

JS代码：

(function() {
    var $ = function(id) {
        return document.getElementById(id);
    };
    var oBox = $("transImageBox"), 
        oTrigger = $("transImageTrigger").getElementsByTagName("a"), 
        lTrigger = oTrigger.length;
        
    if (oBox && lTrigger) {
        for (var i = 0; i<lTrigger; i+=1) {
            oTrigger[i].onclick = function() {
                var index = Number(this.href.replace(/.*#/g, "")) || 1;    
                oBox.style.marginLeft = (1 - index) * 400 + "px";
                return false;
            };    
        }
    }
})();

 

效果：

 

 

案例二：

CSS代码：

.anim_image {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.anim_image_top {
    position: absolute;
    -webkit-transform:scale(1,0);
    opacity: 0;
    filter: Alpha(opacity=0);
}
.anim_box:hover .anim_image_top, .anim_box_hover .anim_image_top {
    opacity: 1;
    filter: Alpha(opacity=100);
    -webkit-transform: scale(1, 1);        
}
.anim_box:hover .anim_image_bottom, .anim_box_hover .anim_image_bottom {
    -webkit-transform:rotate(360deg) scale(0,0);
}

 

HTML代码：

<div id="testBox" class="demo anim_box">
    <img class="anim_image anim_image_top" src="http://image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
    <img class="anim_image anim_image_bottom" src="http://image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />
</div>

 

效果图：

 

案例三：

CSS代码：

@-webkit-keyframes fadeInOut {
    0% {
        opacity:1;
     }
    25% {
        opacity:0;
    }
    50% {
        opacity: 0;    
    }
    75% {
        opacity:1;
    }
}
.anim_fade_image {
    position:absolute;    
    -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    -webkit-animation-direction: alternate;
}

 

HTML代码：

<img class="trans_fade_image" src="http://image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
<img src="http://image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />

 

效果图：

 

案例四：

 

CSS代码：

.anim_image {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    cursor:pointer;
}
.anim_image_top {
    position: absolute;
    -webkit-transform: scale(0, 0);
    opacity: 0;
    filter: Alpha(opacity=0);
}
.anim_box:hover .anim_image_top , .anim_box_hover .anim_image_top {
    opacity: 1;
    filter: Alpha(opacity=100);
    -webkit-transform: scale(1, 1);
    -webkit-transform-origin: top right;        
}
.anim_box:hover .anim_image_bottom, .anim_box_hover .anim_image_bottom {
    -webkit-transform: scale(0, 0);
    -webkit-transform-origin: bottom left;
}

 

HTML代码：

<div id="testBox" class="demo anim_box">
    <img class="anim_image anim_image_top" src="http://image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
    <img class="anim_image anim_image_bottom" src="http://image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />
</div>

 

效果图：

 

案例五：

 

JS代码：

(function() {
    var oImage = document.getElementById("testBox").getElementsByTagName("img");
    oImage[0].onclick = function() {
        var cl = this.className;
        if (/click/.test(cl)) {
            this.className = "trans_fade_image";
        } else {
            this.className = "trans_fade_image trans_fade_image_click";
        }    
    };
})();

 

CSS代码：

.trans_fade_image {
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.trans_fade_image_click {
    opacity:0;
    filter: alpha(opacity=0);
}

 

HTML代码：

<div id="testBox" class="demo">
    <img class="trans_fade_image" src="http://image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
    <img src="http://image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />
</div>

 

效果图：