html

<div class="md-banner">
      <div class="content">
          <div class="roll">
              <div class="item"><a href="###"><img src="images/banner-img1.jpg" /></a></div>
              <div class="item"><a href="###"><img src="images/banner-img2.jpg" /></a></div>
              <div class="item"><a href="###"><img src="images/banner-img3.jpg" /></a></div>
              <div class="item"><a href="###"><img src="images/banner-img4.jpg" /></a></div>
              <div class="item"><a href="###"><img src="images/banner-img5.jpg" /></a></div>
          </div>
      </div>
      <div class="page"></div>
      <a class="btn btn-left"><img src="images/md-icon-btnprev.png"></a>
      <a class="btn btn-right"><img src="images/md-icon-btnnext.png"></a>
</div>

css

.md-banner { position:relative; width: 100%; overflow: hidden; }
.md-banner .roll { width: 100%; height:600px; overflow: hidden; position: relative; }
.md-banner .item { width:1920px; left:50%; margin-left:-960px; position:absolute; opacity:0; transition:all 1s; -webkit-transition:all 1s; -moz-transition:all 1s; z-index: 10; }
 .md-banner .item-open { opacity:1; }
.md-banner .page { position:absolute; text-align:center; bottom:25px; width:100%; z-index:10; font-size:0; }
.md-banner span { cursor:pointer; display:inline-block; width:14px; height:14px; margin:0 5px; border-radius: 50%; background: rgba(0,0,0,.7); }
.md-banner span:hover,.md-banner .span-open { background:#b84c31; }
.md-banner .btn { cursor: pointer; display: block; width: 70px; padding:10px; height: 70px; border-radius: 50%; position: absolute; top: 50%; margin-top: -25px; z-index: 11; background: rgba(0,0,0,.4); text-align: center; line-height: 50px; }
.md-banner .btn img { width: 18px; vertical-align: middle; }
.md-banner .btn-left { left: 0; }
.md-banner .btn-right { right: 0;}

js

$(function(){
        var item_s = $('.md-banner .item');
        var item_l = item_s.length;
        var n=0;
        var timer = null;
        for(var i = 0; i < item_l; ++ i){$('.md-banner .page').append('<span> </span>');}
        var span_s = $('.md-banner span');
        item_s.eq(0).addClass('item-open');
        span_s.eq(0).addClass('span-open');
        function tabff(){
            item_s.eq(n).addClass('item-open').siblings().removeClass('item-open');
            span_s.eq(n).addClass('span-open').siblings().removeClass('span-open');
        }
        function autoplay(){
          timer=setInterval(function(){
             n++;if(n<item_l){tabff()}else{n=0;tabff()}},4000);
         }autoplay();
         span_s.click(function(){
            n = $(this).index();tabff()})
        $('.md-banner .btn-left').click(function(){
          if(n>=0){n--;tabff()}else{n=0;tabff()}
        });
        $('.md-banner .btn-right').click(function(){
          if(n<item_l-1){n++;tabff()}else{n=0;tabff()}
        })
        $('.md-banner').hover(function(){
            clearInterval(timer);},function(){autoplay();}
        )
      })