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