图片预加载 - 爱码网

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片预加载之无序加载</title>
    <style>
        .box {
            text-align: center;
        }

        .btn {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            background: #fff;
            padding: 0 10px;
            margin-right: 50px;
            color: #333;
        }

        a {
            text-decoration: none;
        }

        .btn:hover {
            background-color: #b5b5b5;
        }

    </style>
    <script
            src="js/jquery-3.2.1.js"></script>
</head>
<body>
<div class="box">
    <img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzbOIb6JqABF4o12gc_AAAH9HgF1sh0AEXi7441.jpg"
         alt="pic" />

    <p>
        <a href="javascript:;" class="btn" data-control="prev">上一页</a>
        <a href="javascript:;" class="btn" data-control="next">下一页</a>


    </p>
</div>

<script>
    var imgs = [
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzbOIb6JqABF4o12gc_AAAH9HgF1sh0AEXi7441.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJ1auzbKIS8d1ABmgDYbGTm4AAH9HgDVQJkAGaAl653.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzbKIYXwYAA3k8MKqRbcAAH9HgDu4L4ADeUI140.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJ1auzbKIHSPXABHf7cWFpNwAAH9HgD8xcYAEeAF788.png",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzbKIeIlZAAnxiXety0IAAH9HgEOpcsACfGh744.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJ1auzbKIX4p4ABNtzPOq83gAAH9HgEYl2wAE23k650.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJ1auzbKIdDRhABqMJC8YI_sAAH9HgEsBVAAGow8388.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzbOIF7dTABn5-3IG-s8AAH9HgFGkYwAGfoT769.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzbOIadTUABUmZqHccD0AAH9HgFgi58AFSZ-104.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/08/0A/ChMkJ1i9XJmIJnFtABXosJGWaOkAAae8QGrHE8AFejI057.jpg"

    ];
    var index = 0,
            len = imgs.length;
    $('.btn').on("click", function () {
        if ('prev' === $(this).data('control')) {//上一张
            index = Math.max(0, --index);
        } else {//下一张
            index = Math.min(len - 1, ++index);
        }
        document.title = (index + 1) + '/' + len;
        $("#img").attr('src', imgs[index]);
    })


</script>
</body>
</html>
View Code