原生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>