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

网页元素一个一个删除，然后一个一个载入新网页的元素,这样子网页在过度过程中会出现变形和抖动。

比较好的办法是把老网页和新网页的元素分别放置到一个层里，开始是现实老网页层，新网页层display设为none，不显示。

过度时使用新网页层盖住老网页层，过度效果就是新网页层盖住老网页层的过程效果。效果可以百度一下。当新网页层完全盖住老网页层时，把老网页层（这是页个元素）删除就可以了。

你把底下这段代码运行下：

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeToggle()

$("#div2").fadeToggle("slow")

$("#div3").fadeToggle(3000)

})

})

</script>

</head>

<body>

<p>演示带有不同参数的 fadeToggle() 方法。</p>

<button>点击这里，使三个矩形淡入淡出</button>

<br><br>

<div id="div1" style="width:80pxheight:80pxbackground-color:red"></div>

<br>

<div id="div2" style="width:80pxheight:80pxbackground-color:green"></div>

<br>

<div id="div3" style="width:80pxheight:80pxbackground-color:blue"></div>

</body>

</body>

</html>