首页 > 代码库 > 写了一个简单轮播效果实现

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

2024-09-19 16:30:10   206人阅读

<!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://www.mamicode.com/"http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
    <div id="page" class="box">
        <img src=http://www.mamicode.com/"http://img.mukewang.com/58fcb33800011b4b12000460.jpg" alt="">
        <div class="cruent">
            <a href=http://www.mamicode.com/"javascript:;" class="btn prev">上一页</a>
            <a href=http://www.mamicode.com/"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>

 技术分享

 

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


联系
我们