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

JavaScript011

求淡入淡出的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>

这样：

<script language="javascript">

function hide(id)

{

if(document.getElementById(id).filters.alpha.opacity >= 0)

{

document.getElementById(id).filters.alpha.opacity -= 5

window.setTimeout("hide(\"" + id +"\")", 100)

}

}

</script>

扩展资料：

注意事项

此外对于透明度有一点要说明一下，就是在IE中在css中设置透明度的方式filter:alpha(opacity:value)其中value值从0~100

透明度可以通过opacity：value来设置，其中value=0~1.

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>js动画事件</title>

<link href="move.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="move.js"></script>

</head>

<body>

<div id="div1">

</div>

</body>

</html>