首页 > 代码库 > 利用原生JS实现网页1920banner图滚动效果

利用原生JS实现网页1920banner图滚动效果

2024-09-15 09:44:58   217人阅读

内容描述：随着PC设备硬件性能的进步和分辨率的不断提高，现在主流网站逐渐开始采用1920banner图，为适应这一趋势，博主设计了1920banner图的滚动效果，代码利用了原生JS实现了1920banner图的切换效果，并针对低分辨率电脑设备进行了适配，实现了JS代码与HTML代码的完全分离，符合w3c的标准使用规范，希望能给各位开发者朋友以帮助和参考。如发现有缺陷和不足，欢迎大家予以指正，如有更好的意见或解决方法，可在评论区交流互动。一下为代码内容：

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

 

利用原生JS实现网页1920banner图滚动效果


联系
我们