首页 > 代码库 > 原生JS实现banner图的滚动与跳转
原生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>
原生JS实现banner图的滚动与跳转
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。