轮播图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%  移动的距离有问题