轮播图 jquery

轮播图

1、jquery插件：unslider.js

基本的轮播效果可以满足，但是我现在需要的不是这种

2、

下次看着这个效果改就好。
css

.swiper-con{
  width:402px;
  height:100px;
  border:1px solid black;
  position:relative;
  overflow:hidden;
}
img{
  width:100px;
  height:100px;
}
#right{
  float: right;
}
.swiper1{
  width:100%;
  height:100px;
  overflow: hidden;
}
.swiper2{
  height:100px;
  position:absolute;
  left: 0;
}

html

<div class="container">
  <span id='left'>左边</span>
  <span id='right'>右边</span>
  <div class="swiper-con">
    <div class='swiper1'>
      <div class='swiper2'>
        <img src="http://mooc.jikexueyuan.com/File/8dda2bb223523163ca596c7f026de6ad.png" alt="北京交通大学">
        <img src="http://mooc.jikexueyuan.com/File/56bcbb484f1da10f7af7a0c168a9f6e0.png" alt="中国矿业大学">
        <img src="http://mooc.jikexueyuan.com/File/acd12acf25c0681c43ab4144d2955aec.png" alt="内蒙古大学">
        <img src="http://mooc.jikexueyuan.com/File/62906dcda2846bc2437efa99ab382722.png" alt="辽宁大学">
        <img src="http://mooc.jikexueyuan.com/File/c14635ad605aca1d593e1e52500945af.png" alt="北京化工大学">
        <img src="http://mooc.jikexueyuan.com/File/604ebd122c8734703e1f49f7b4d842ad.png" alt="东南大学">
        <img src="http://mooc.jikexueyuan.com/File/c2000b91a02f14b794d2c9b9071e745d.png" alt="厦门大学">
      </div>
    </div>
  </div>
</div><!-- /.container -->

js

// 设置width
  function swiper2Width(){
    var imgs = $('.swiper2 img');
    var swiper2_width = (imgs.length+1) * 100;
    $('.swiper2').css('width', swiper2_width);
    console.log('debug');
  }

  swiper2Width();
  var flag = 0;

  $('#right').on('click', function(e){
    if(flag == 0){
      // 判断是否到最右
      var _right = +$('.swiper2').css('left').replace('px', '');
      if(_right > -300){
        flag = 1;
        $('.swiper2').animate({left: '-=100px'}, 400, 'linear', function(){
          console.log('debug');
          flag = 0;
        })
      }
    }
  })

  $('#left').on('click', function(e){
    if(flag == 0){
      var _left = +$('.swiper2').css('left').replace('px', '');
      if(_left < 0){
        flag = 1;
        $('.swiper2').animate({left: '+=100px'}, 400, 'linear', function(){
          console.log('debug');
          flag = 0;
        })
      }
    }
  })