淡入淡出背景轮播 jq实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34775102/article/details/78212200

直接上代码

html

 <div id="login" >
        <ul id="lbyc">
            <li class="lb-1">
                <img src="imgs/2.jpg" /></li>
            <li class="lb-2">
                <img src="imgs/3.jpg" /></li>
            <li class="lb-3">
                <img src="imgs/1.jpg" /></li>
             <li class="lb-4">
                <img src="imgs/4.jpg" /></li>
            <li class="lb-5">
                <img src="imgs/5.jpg" /></li>
            <li class="lb-6">
                <img src="imgs/6.jpg" /></li>
             <li class="lb-7">
                <img src="imgs/7.jpg" /></li>
            <li class="lb-8">
                <img src="imgs/8.jpg" /></li>
            <li class="lb-9">
                <img src="imgs/9.jpg" /></li>
             <li class="lb-10">
                <img src="imgs/10.jpg" /></li>
        </ul>
 </div>
jq 当然这可以优化 用class做 这就不多说了

<script src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            setInterval("imgpy()", 6000);
        });
        var lb = 1;
        function imgpy() {
            if (lb == 1) {
                $('.lb-10').animate({ opacity: "0" },3000);
                $('.lb-1').animate({ opacity: "1" }, 3000);
                lb++;
            } else if (lb == 2) {
                $('.lb-1').animate({ opacity: "0" }, 3000);
                $('.lb-2').animate({ opacity: "1" }, 3000);
                lb++;
            } else if (lb == 3) {
                $('.lb-2').animate({ opacity: "0" }, 3000);
                $('.lb-3').animate({ opacity: "1" }, 3000);
                lb++;
            } else if (lb == 4) {
                $('.lb-3').animate({ opacity: "0" }, 3000);
                $('.lb-4').animate({ opacity: "1" }, 3000);
                lb++;
            } else if (lb == 5) {
                $('.lb-4').animate({ opacity: "0" }, 3000);
                $('.lb-5').animate({ opacity: "1" }, 3000);
                lb++;
            } else if (lb == 6) {
                $('.lb-5').animate({ opacity: "0" }, 3000);
                $('.lb-6').animate({ opacity: "1" }, 3000);
                lb++;
            } else if (lb == 7) {
                $('.lb-6').animate({ opacity: "0" }, 3000);
                $('.lb-7').animate({ opacity: "1" }, 3000);
                lb++;
            } else if (lb == 8) {
                $('.lb-7').animate({ opacity: "0" }, 3000);
                $('.lb-8').animate({ opacity: "1" }, 3000);
                lb++;
            } else if (lb == 9) {
                $('.lb-8').animate({ opacity: "0" }, 3000);
                $('.lb-9').animate({ opacity: "1" }, 3000);
                lb++;
            } else if (lb == 10) {
                $('.lb-9').animate({ opacity: "0" }, 3000);
                $('.lb-10').animate({ opacity: "1" }, 3000);
                lb = 1;
            }
        }
    </script>

css

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
            font-family: 微软雅黑;
        }

        body {
            width: 100%;
            height: 100%;
        }

        #login {
            position: relative;
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
            background-image: url("imgs/10.jpg");
            background-size: cover;
        }
        #lbyc {
             display:block;
        }
        #lbyc li{
            float:left;
            position:absolute;
            /*border:1px #f00 solid;*/
            display:inline-block;
            width:100%;
            height:100%;
            opacity:0;
        }
        #lbyc li img{
        	  width:100%;
            height:100%;
        	 
        	}
    </style>