您的位置：首页 > 其它

写了一个简单轮播效果实现

2017-05-05 21:06 447 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航