<style> .banner{width: 250px;height: 200px;margin: 0 auto;overflow: hidden;position: relative;} .banner_page{position: absolute;top: 0;left: 0px;width: 1250px;} .bannerli{width: 250px;height: 200px;font-size: 50px;color: #333333;background: #B8001E;float: left;text-align: center;} .banner_btn{width: 100%;margin: 0 auto;position: relative;margin-top: 100px;} .banner_btn a{font-size: 15px;background: #898989;color: #FFFFFF;width: 20px;height: 20px;text-align: center;position: absolute;} .banner_btn a.prev{top: 0;left: 0;} .banner_btn a.next{top: 0;right: 0;} </style> <script> $(function(){ var aa = document.getElementsByClassName("banner_page")[0]; function ban_btn(index){ aa.style.left = aa.style.left + index + 'px'; } $(".prev").click(function(){ ban_btn(+250); }) $(".next").click(function(){ ban_btn(-250); }) }); </script><div class="banner"> <div class="banner_page"> <div class="bannerli">1</div> <div class="bannerli">2</div> <div class="bannerli">3</div> <div class="bannerli">4</div> <div class="bannerli">5</div> </div> <div class="banner_btn"> <a href="javascript:;" class="prev"><</a> <a href="javascript:;" class="next">></a> </div> </div>
添加回答
举报
0/150
提交
取消