利用原生JS實現網頁1920banner圖滾動效果

時間 2020-08-18

標籤利用原生實現網頁 1920banner banner 滾動效果欄目 JavaScript 简体版

原文原文鏈接

內容描述：隨着PC設備硬件性能的進步和分辨率的不斷提升，如今主流網站逐漸開始採用1920banner圖，爲適應這一趨勢，博主設計了1920banner圖的滾動效果，代碼利用了原生JS實現了1920banner圖的切換效果，並針對低分辨率電腦設備進行了適配，實現了JS代碼與HTML代碼的徹底分離，符合w3c的標準使用規範，但願能給各位開發者朋友以幫助和參考。如發現有缺陷和不足，歡迎你們予以指正，若有更好的意見或解決方法，可在評論區交流互動。一下爲代碼內容：css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            
            #banner{
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                position: relative;
            }
            
            #banner #inside{
                width: 9600px;
                position: relative;
                left: 50%;
                margin-left: -960px;
                transition: all 1s ease;
            }
            
            #banner img{
                width: 1920px;
                height: 500px;
            }
            
            #bannerNum{
                padding: 0px;
                list-style: none;
                overflow: hidden;
                width: 160px;
                position: absolute;
                bottom: 30px;
                right: 50px;
            }
            
            #bannerNum li{
                width: 30px;
                height: 30px;
                background-color: white;
                text-align: center;
                line-height: 30px;
                margin: 0px 5px;
                float: left;
                cursor: pointer;
            }
            
        </style>
        
    <script>
        var num = 1;
        var inside;
        window.onload = function(){
            
            inside = document.getElementById("inside");
            
            var interval = setInterval(function(){
                inside.style.transition = "all 1s ease";
                num++;
                switch (num){
                    case 1:
                        inside.style.transition = "none";
                        inside.style.marginLeft = (-960)+"px";
                        break;
                    case 2:
                        inside.style.marginLeft = (-960-1920)+"px";
                        break;
                    case 3:
                        inside.style.marginLeft = (-960-1920*2)+"px";
                        break;
                    case 4:
                        inside.style.marginLeft = (-960-1920*3)+"px";
                        break;
                    case 5:
                        inside.style.marginLeft = (-960-1920*4)+"px";
                        num = 0;
                        break;
                    default:
                        break;
                }
            },2000);
        }
        
        function changeBanner(num1){
            inside.style.transition = "none";
            switch (num1){
                case 1:
                    inside.style.marginLeft = (-960)+"px";
                    break;
                case 2:
                    inside.style.marginLeft = (-960-1920)+"px";
                    break;
                case 3:
                    inside.style.marginLeft = (-960-1920*2)+"px";
                    break;
                case 4:
                    inside.style.marginLeft = (-960-1920*3)+"px";
                    break;
                default:
                    break;
            }
            
            num = num1-1;
            
        }
        
        
    </script>
        
    </head>
    
    <body>
        
        <div id="banner">
            <div id="inside">
                <img src="img/20160919090419962.jpg" id="img1" /
                ><img src="img/20170120045915164.png" id="img2" /
                ><img src="img/20170125042305221.jpg" id="img3" /
                ><img src="img/f2_img4.jpg" id="img4" /
                ><img src="img/20160919090419962.jpg" id="img5" />
            </div>
            
            <ul id="bannerNum">
                <li onclick="changeBanner(1)">1</li>
                <li onclick="changeBanner(2)">2</li>
                <li onclick="changeBanner(3)">3</li>
                <li onclick="changeBanner(4)">4</li>
            </ul>
        </div>
        
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。