轮播图 jquery

轮播图

.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;
}

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

// 设置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;
})
}
}
})