寫了一個簡單輪播效果實現
阿新 • • 發佈：2017-05-05
char line query span size html ef6 ava top
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body{height:100%;} *{margin:0;padding:0;} .box{ width:100%; height:100%; text-align:center; } a{ text-decoration:none; } .box .btn{ display:inline-block; color:#abcdef; width:80px; height:40px; text-align:center; line-height:40px; } .box .btn:hover{ background:#ddd; color:#fff; } .box img{display:none;} .loading{ position:fixed; width:100%; height:100%; text-align:center; left:0; top:0; background:#ddd; font-size:30px; color:#555; display:block; } .loading .loading-text{ margin-top:300px; }</style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> </head> <body> <div id="page" class="box"> <img src="http://img.mukewang.com/58fcb33800011b4b12000460.jpg" alt=""> <div class="cruent"> <a href="javascript:;" class="btn prev">上一頁</a> <a href="javascript:;" class="btn next">下一頁</a> </div> </div> <div class="loading"> <div class="loading-text">0%</div> </div> <script> $(function(){ var arr = ["http://img.mukewang.com/58fcb33800011b4b12000460.jpg", "http://img.mukewang.com/5903646e00011baa12000460.jpg","http://img.mukewang.com/5903653d0001041812000460.jpg","http://img.mukewang.com/58f893ae00010ef612000460.jpg"]; var index = 0; var count = 0; $.each(arr,function(i,val){ var loadImg = new Image(); $(loadImg).on("load error",function(){ $(".loading-text").html(Math.round((count+1)/arr.length*100)+"%"); }) loadImg.src = val; if(count >= arr.length-1){ $(".loading").hide(); $(".box").find("img").eq(index).show(); } count++; }) $(‘.prev‘).on(‘click‘,function(){ ++index; if(index > arr.length-1){ index = 0; } $(".box").find("img").attr("src",arr[index]); }) $(".next").on("click",function(){ --index; if(index<0){ index = arr.length-1; } $(".box").find("img").attr("src",arr[index]); }) }) </script> </body> </html>
寫了一個簡單輪播效果實現