想让每张图的宽度自适应，以便于适应不同尺寸的手机端，但是自动滚动时总是会出现图片错位。怎么解决。
下面是我的html代码
<div class="banner">
<div class="banner-btn">
<a href="javascript:;" class="prevBtn"><i></i></a>
<a href="javascript:;" class="nextBtn"><i></i></a>
</div>
<ul class="banner-img" style="left: -250px;">
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
<li><a href="#"><img src="img/5.jpg"></a></li>
<li><a href="#"><img src="img/6.jpg"></a></li>
</ul>
<ul class="banner-circle"></ul>
</div>
CSS的：.banner{ width:100%; height: 150px; position: relative; overflow: hidden; margin-bottom: 0; margin-left: auto; margin-right: auto; }
.banner-btn{display:none;}
.banner-btn a{display:block;line-height:40px;position:absolute;top:120px;width:40px;height:40px;background-color:#000;opacity:0.3;filter:alpha(opacity=30) color:rgb(255, 255, 255);overflow:hidden;z-index:4;}
.prevBtn{left:5px;}
.nextBtn{right:5px;}
.banner-img{font-size:0;*word-spacing:-1px;/* IE6、7 */ letter-spacing:-3px;position:relative;}
.banner-img li{display:inline-block;*display:inline;*zoom:1;/* IE6、7 */ vertical-align:top;letter-spacing:normal;word-spacing:normal;font-size:12px;}
.banner i{background:url(http://gtms01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png) no-repeat;width:15px;height:23px;cursor:pointer;margin:8px 0 0 12px;display:block;}
.banner .nextBtn i{background-position:-200px -24px;}
.banner .prevBtn i{background-position:-200px 0px;}
.banner-circle{position:absolute;left:50%;bottom:15px;height:13px;text-align:center;font-size:0;border-radius:10px;background:rgba(255,255,255,0.3);filter:alpha(opacity:30);}
.banner-circle li{border-radius:10px;margin:2px;display:inline-block;display:-moz-inline-stack;vertical-align:middle;zoom:1;}
.banner-circle li a{display:block;padding-top:9px;width:9px;height:0;border-radius:50%;background:#B7B7B7;overflow:hidden;}
.banner-circle .selected a{background:#F40;}
JQ的：
<script type="text/javascript">
$(function() {
var $banner = $('.banner');
var $banner_ul = $('.banner-img');
var $btn = $('.banner-btn');
var $btn_a = $btn.find('a');
var v_width = $banner.width();
var page = 1;
var timer = null;
var btnClass = null;
var page_count = $banner_ul.find('li').length; //把这个值赋给小圆点的个数
var banner_cir = "<li class='selected' href='#'><a></a></li>";
for (var i = 1; i < page_count; i++) {
//动态添加小圆点
banner_cir += "<li><a href='#'></a></li>";
}
$('.banner-circle').append(banner_cir);
var cirLeft = $('.banner-circle').width() * ( - 0.5);
$('.banner-circle').css({
'marginLeft': cirLeft
});
$banner_ul.width(page_count * v_width);
function move(obj, classname) {
//手动及自动播放
if (!$banner_ul.is(':animated')) {
if (classname == 'prevBtn') {
if (page == 1) {
$banner_ul.animate({
left: -v_width * (page_count - 1)
});
page = page_count;
cirMove();
} else {
$banner_ul.animate({
left: '+=' + v_width
},
"slow");
page--;
cirMove();
}
} else {
if (page == page_count) {
$banner_ul.animate({
left: 0
});
page = 1;
cirMove();
} else {
$banner_ul.animate({
left: '-=' + v_width
},
"slow");
page++;
cirMove();
}
}
}
}
function cirMove() {
//检测page的值，使当前的page与selected的小圆点一致
$('.banner-circle li').eq(page - 1).addClass('selected').siblings().removeClass('selected');
}
$banner.mouseover(function() {
$btn.css({
'display': 'block'
});
clearInterval(timer);
}).mouseout(function() {
$btn.css({
'display': 'none'
});
clearInterval(timer);
timer = setInterval(move, 3000);
}).trigger("mouseout"); //激活自动播放
$btn_a.mouseover(function() {
//实现透明渐变，阻止冒泡
$(this).animate({
opacity: 0.6
},
'fast');
$btn.css({
'display': 'block'
});
return false;
}).mouseleave(function() {
$(this).animate({
opacity: 0.3
},
'fast');
$btn.css({
'display': 'none'
});
return false;
}).click(function() {
//手动点击清除计时器
btnClass = this.className;
clearInterval(timer);
timer = setInterval(move, 3000);
move($(this), this.className);
});
$('.banner-circle li').live('click',
function() {
var index = $('.banner-circle li').index(this);
$banner_ul.animate({
left: -v_width * index
},
'slow');
page = index + 1;
cirMove();
});
});
</script>
xyyyy318