图片透明切换

最新推荐文章于 2022-08-22 14:12:08 发布

辣姐什么鬼

最新推荐文章于 2022-08-22 14:12:08 发布

阅读量345

点赞数

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/52212122

版权

web前端专栏收录该内容

174 篇文章 7 订阅

订阅专栏

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

效果图：

代码如下：

<!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>

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