原生JS实现banner图的滚动与跳转

Posted 2020-09-11 panda多读书

html部分：

<div id="banner">
            <!--4张滚动的图片-->
            <div id="inside">
                <img src="../../img/14072415363339_0.jpg"><img 
                src="../../img/14072415383924_0.jpg" id="img2" /><img 
                src="../../img/14072415383948_0.jpg" id="img3" /><img 
                src="../../img/14072415383951_0.jpg" id="img4"/><img 
                src="../../img/14072415363339_0.jpg" id="img5"/>
            </div>
            
            <!--4个跳转到相应图片的按钮-->
            <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>

CSS部分：

<style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            
            #banner{
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                position: relative;
            }
            
            #banner #inside{
                width: 6830px;
                position: relative;
                left: 50%;
                margin-left: -683px;
                transition: all 1s ease;
            }
            
            #banner img{
                width: 1366px;
            }
            
            #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>

原生JS部分：

<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 = (-683)+"px";
                        break;
                    case 2:
                        inside.style.marginLeft = (-683-1366)+"px";
                        break;
                    case 3:
                        inside.style.marginLeft = (-683-1366*2)+"px";
                        break;
                    case 4:
                        inside.style.marginLeft = (-683-1366*3)+"px";
                        break;
                    case 5:
                        inside.style.marginLeft = (-683-1366*4)+"px";
                        num = 0;
                        break;
                    default:
                        break;
                }
            },2000);
        }
        
        function changeBanner(num1){
            inside.style.transition = "none";
            switch (num1){
                case 1:
                    inside.style.marginLeft = (-683)+"px";
                    break;
                case 2:
                    inside.style.marginLeft = (-683-1366)+"px";
                    break;
                case 3:
                    inside.style.marginLeft = (-683-1366*2)+"px";
                    break;
                case 4:
                    inside.style.marginLeft = (-683-1366*3)+"px";
                    break;
                default:
                    break;
            }
            
            num = num1-1;
            
        }
        
        
    </script>