淡入淡出背景轮播 jq实现

直接上代码

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>