求淡入淡出的js轮播效果的代码

JavaScript012

求淡入淡出的js轮播效果的代码,第1张

如下代码可以实现,不过你首先需要引用Jquery,我使用的是jquery-1.7.1.min.js

支持两个div或多个div的淡入淡出切换:

<div id="imgbox">

    <div style="width:100pxheight:100pxbackground-color:red"></div>

    <div style="width:100pxheight:100pxbackground-color:blue"></div>

</div>

<script src="jquery-1.7.1.min.js"></script>

<script>

$(document).ready(function(){

    $("#imgbox div").fadeOut(0).eq(0).fadeIn(0)

    var i = 0

    setInterval(function(){

        if($("#imgbox div").length > (i+1)){

            $("#imgbox div").eq(i).fadeOut(0).next("div").fadeIn(1000)

            i++

        }

        else{

            $("#imgbox div").eq(i).fadeOut(0).siblings("div").eq(0).fadeIn(1000)

            i = 0

        }

    },2000)

})

</script>

如下代码可以实现,不过你要首先下载一个JS插件:Jquery,我用的是jquery-1.9.1.min.js,你下载下来后放到网页同级目录就可以了,如入代码适用于2张或多张图片。

<div id="imgbox">

<img src="11.jpg" /><img src="22.jpg" />

</div>

<script src="jquery-1.9.1.min.js"></script>

<script>

$(document).ready(function(){

$("#imgbox img").fadeOut(0).eq(0).fadeIn(0)

var i = 0

setInterval(function(){

if($("#imgbox img").length > (i+1)){

$("#imgbox img").eq(i).fadeOut(0).next("img").fadeIn(1000)

i++

}

else{

$("#imgbox img").eq(i).fadeOut(0).siblings("img").eq(0).fadeIn(1000)

i = 0

}

},2000)

})

</script>

@keyframes anim

{

from {opacity: 1}

to {opacity: 0}

}

.anim-welcome

{

animation: anim 3s

}

执行时,为需要淡出的节点添加样式anim-welcome,兼容其他浏览器请自查;

该法为css3实现,不管如何兼容IE9-是无效的,全兼容需脚本支持:

$('#node').fadeout()