想讓每張圖的寬度自適應(yīng)，以便于適應(yīng)不同尺寸的手機(jī)端，但是自動滾動時總是會出現(xiàn)圖片錯位。怎么解決。下面是我的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; //把這個值賦給小圓點(diǎn)的個數(shù)? ? ? ? var banner_cir = "<li class='selected' href='#'><a></a></li>";? ? ? ? for (var i = 1; i < page_count; i++) {? ? ? ? ? ? //動態(tài)添加小圓點(diǎn)? ? ? ? ? ? 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的值，使當(dāng)前的page與selected的小圓點(diǎn)一致? ? ? ? ? ? $('.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() {? ? ? ? ? ? //實(shí)現(xiàn)透明漸變，阻止冒泡? ? ? ? ? ? $(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() {? ? ? ? ? ? //手動點(diǎn)擊清除計(jì)時器? ? ? ? ? ? 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>