- "en">"UTF-8">
- 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;
- }
- "http://libs.baidu.com/jquery/1.9.0/jquery.min.js">"page" class="box">"http://img.mukewang.com/58fcb33800011b4b12000460.jpg"alt="">class="cruent">"javascript:;" class="btn prev">上一页"javascript:;" class="btn next">下一页class="loading">class="loading-text">0%
- $(function(){
- vararr = ["http://img.mukewang.com/58fcb33800011b4b12000460.jpg",
- "http://img.mukewang.com/5903646e00011baa12000460.jpg","http://img.mukewang.com/5903653d0001041812000460.jpg","http://img.mukewang.com/58f893ae00010ef612000460.jpg"];
- varindex =0;
- varcount =0;
- $.each(arr,function(i,val){
- varloadImg =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]);
- })
- })
来源: http://www.bubuko.com/infodetail-2054870.html