轮播图JQ插件改变大小出现的错位问题。

Question

想让每张图的宽度自适应，以便于适应不同尺寸的手机端，但是自动滚动时总是会出现图片错位。怎么解决。下面是我的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>

Answer 1

正常的那个.banner 的宽度是固定死了的  你这个宽度是100%  移动的距离有问题