简单手风琴特效、轮播

<div style="position: relative; width: 100%; height: 500px;overflow:hidden;">
            <div id="1" style="width: 85%; height: 500px; position: absolute; float: left; transition: 0.7s;background-image:url(img/by1.jpg)" οnmοuseοver="bian(1)"></div>
            <div id="2" style="width: 85%; height: 500px; position: absolute; float: left; transition: 0.7s;background-image:url(img/by2.jpg);left:5%;" οnmοuseοver="bian(2)"></div>
            <div id="3" style="width: 85%; height: 500px; position: absolute; float: left; transition: 0.7s;background-image:url(img/by3.jpg);left:10%;" οnmοuseοver="bian(3)"></div>
            <div id="4" style="width: 85%; height: 500px; position: absolute; float: left; transition: 0.7s;background-image:url(img/by4.jpg);left:15%;" οnmοuseοver="bian(4)"></div>
        </div>

<script>
    function bian(n)
    {
        if (n == 1)
        {
            document.getElementById("1").style.left = "";
            document.getElementById("2").style.left = "85%";
            document.getElementById("3").style.left = "90%";
            document.getElementById("4").style.left = "95%";
        }
        if (n == 2) {
            document.getElementById("1").style.left = "";
            document.getElementById("2").style.left = "5%";
            document.getElementById("3").style.left = "90%";
            document.getElementById("4").style.left = "95%";
        }
        if (n == 3) {
            document.getElementById("1").style.left = "";
            document.getElementById("2").style.left = "5%";
            document.getElementById("3").style.left = "10%";
            document.getElementById("4").style.left = "95%";
        }
        if (n == 4) {
            document.getElementById("1").style.left = "";
            document.getElementById("2").style.left = "5%";
            document.getElementById("3").style.left = "10%";
            document.getElementById("4").style.left = "15%";
        }


    }


</script>

 

简单轮播：

<div id="t"  style="background-image:url(img/by1.jpg);width:100%;height:500px;">
        

    </div>

<script>
    var tp = new Array();
    tp[0] = "url(img/by1.jpg)";
    tp[1] = "url(img/by2.jpg)";
    tp[2] = "url(img/by3.jpg)";
    tp[3] = "url(img/by4.jpg)";
    var tt = document.getElementById("t");
    var xb = 0;
    function huan() {
        xb++;
        if (xb == tp.length)
        {
            xb = 0;
        }
        if (xb == 0)
        {
            tt.style.backgroundImage = tp[0];
        }
        if (xb == 1)
        { tt.style.backgroundImage = tp[1];}
        if (xb == 2)
        { tt.style.backgroundImage = tp[2]; }
        if(xb == 3)
        { tt.style.backgroundImage = tp[3]; }

        window.setTimeout("huan()",2000);
    }
    window.setTimeout("huan()",2000);
</script>

 

转载于:https://www.cnblogs.com/wy1992/p/6563835.html