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

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>