轮播图 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

左边
右边

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