图片透明切换

来源：互联网发布：windows cmd 切换盘符编辑：程序博客网时间：2024/06/03 23:43

效果就是图片切换时的效果是透明度变换的

效果图：

代码如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{            margin:0;            padding:0;        }        #all{            width:730px;            height:420px;            border:6px dashed pink;            margin:100px auto;            position:relative;        }        #one{            width:730px;            height:420px;        }        #two {            width:730px;            height:420px;            position:absolute;            top:0;            left:0;            opacity:0;        }        #pre{            float:left;        }        #next{            float:right;            right:0;        }        #pre a,#next a{            display:block;            width:60px;            height:80px;            color:white;            text-align:center;            line-height:80px;            font-size:40px;            font-weight:bold;        }        #pre,#next{            width:60px;            height:80px;            background-color:rgba(0,0,0,0.5);            z-index:1;            top:170px;            position:absolute;            display:none;        }        #all:hover #pre,#all:hover #next{            display:block;        }        a:hover{            cursor:pointer;        }        #num{            position:absolute;            top:10px;            right:15px;            width:50px;        }        #num a{            display: block;            width:16px;            height:16px;            -webkit-border-radius: 8px;            -moz-border-radius: 8px;            border-radius: 8px;            border:1px solid white;            margin-right:6px;            float:left;        }        .class{            background-color:pink;        }    </style></head><body><div id="all">    <div id="img">        <div id="one"></div>        <div id="two"></div>    </div>    <div id="num">        <a class="class" data="0"></a>        <a data="1"></a>    </div>    <div id="pre" onclick="preNext()"><a>&lt;</a></div>    <div id="next" onclick="preNext()"><a>&gt;</a></div></div><script src="jquery-1.10.2.min.js"></script><script>    var one=0;    var two=1;    $(function(){        $("#one").css("background-image","url('s3.jpg')");        $("#two").css("background-image","url('s2.jpg')");//        $("two").css('opacity',0);    });    function show(){//自动切换        $("#num a").eq(two).addClass("class").siblings().removeClass("class");        $("#one").stop().animate({opacity:one},500);        $("#two").stop().animate({opacity:two},500);        if(one==0){            one++;            two--;        }else{            one--;            two++;        }    }    setInterval(show,6000);    function preNext(){//前进后退按钮切换        if(one==0){            one++;            two--;        }else{            one--;            two++;        }        $("#num a").eq(two).addClass("class").siblings().removeClass("class");        $("#one").stop().animate({opacity:one},500);        $("#two").stop().animate({opacity:two},500);    }    $("#num a").click(function(){//圆点按钮        var index=$(this).attr("data");        var i=parseInt(index);        $("#num a").eq(i).addClass("class").siblings().removeClass("class");    })</script></body></html>

//这里其实有一点小问题，就是当图片没开始自动切换的时候如果点上一幅下一幅按钮第一次点击是没有反应的，第二次点击开始正常

0 0