淡入淡出背景輪播 jq實現
阿新 • • 發佈:2018-11-10
直接上程式碼
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做 這就不多說了
css<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>
<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>