JS實現網頁背景旋轉縮放輪播效果

本文轉載自查看原文 2019-02-24 14:15 997 Web前端/ Javascript

css代碼：

.switch_images {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}
.switch_images li {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 6s all;
}
.switch_images img {
    min-height: 100%;
    width: 100%;
}

目的：讓背景全屏顯示並且位於最底層。

html代碼:

<body>
        <ul class="switch_images" id="pic_content">
            <!-- 圖片輪播 -->
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
        </ul>
</body>

這里我們先插入了三張壁紙，避免剛開始通過函數加載出來的壁紙延遲。

js代碼：

    setInterval(function () {
            $.get('http://api.youngam.cn/picapi.php', function (data) { //通過ajax獲取到新的圖片地址
                $('#pic_content').prepend(
                    '<li><img src="' + data + '" alt=""></li>');//插入新的li
            });

        //刪除最后一個li
        $('#pic_content li:last-child').remove();
        $('#pic_content li:last-child').css({
            transform: 'scale(1.1) rotate(' + parseInt((Math.random() - 0.5) * 20) + 'deg)',
            opacity: '0'
        });//刪除最后一個li時給他一個過度。旋轉+-10度，透明度變為0
    }, 8000);//8秒切換一張

總代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景輪播</title>
        <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
.switch_images {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}
.switch_images li {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 6s all;
}
.switch_images img {
    min-height: 100%;
    width: 100%;
}
        </style>
    </head>
    <body>
        <ul class="switch_images" id="pic_content">
            <!-- 圖片輪播 -->
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
        </ul>
    </body>
    <script>
    setInterval(function () {
            $.get('http://api.youngam.cn/picapi.php', function (data) {
                $('#pic_content').prepend(
                    '<li><img src="' + data + '" alt=""></li>');
            });

        //刪除最后一個li
        $('#pic_content li:last-child').remove();
        $('#pic_content li:last-child').css({
            transform: 'scale(1.1) rotate(' + parseInt((Math.random() - 0.5) * 20) + 'deg)',
            opacity: '0'
        });
    }, 8000);
    </script>
</html>

這里調用了我的圖片api接口。

包含了很多圖片，歡迎大叫調用。

當然你也可以使用自己的方法換圖片地址。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 超贊網頁背景效果-canvas-nest.js 網頁背景圖片自然縮放原生JS實現"旋轉木馬"效果的圖片輪播插件網頁背景圖片拉伸如何將視頻設置為網頁背景基於原生js的圖片輪播效果簡單實現 js實現簡單輪播圖效果原生JS輪播-各種效果的極簡實現 js+css3實現旋轉效果如何讓網頁背景圖片完整顯示