使用bxslider无法正常旋转动态内容和图像

时间:2014-01-16 10:26:17

标签: javascript jquery bxslider

http://bxslider.com/lib/jquery.bxslider.js

$.ajax({
                type: "POST",
                url: '<%= Page.ResolveUrl("~")%>Haggler.asmx/GetFacebookFriends',
                //data: jsonText,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                //'access_token':" + JSON.stringify(access_token) + "


                success: function (data) {
                    var myObject = JSON.parse(eval('(' + data.d + ')'));
                    var length = myObject.data.length;
                    alert(length);

                    //var container = document.getElementById('mfs');
                    //var mfsForm = document.createElement('form');
                    //mfsForm.id = 'mfsForm';

                    // Iterate through the array of friends object and create a checkbox for each one.
                    for (var i = 0; i < Math.min(myObject.data.length, 10) ; i++) {
                        htmlT += '<a data-slide-index="' + i + '" href=""><img src="' + myObject.data[i].pic_square + '" /></a>';
                        // var friendItem = document.createElement('div');


                        pageIndex = 1;
                        pageCount = 0;
                        clearHtml = true;
                        loadData(myObject.data[i].uid, function (html) { HtmlM += html; });
                        // HtmlM += loadData(myObject.data[i].uid);





                    }

                    $('.bxslider').bxSlider({
                        pagerCustom: '#bx-pager'


                    });

                    $('#reload-slider').click(function (e) {
                        e.preventDefault();
                        slider.reloadSlider({
                            mode: 'fade',
                            auto: true,
                            pause: 1000,
                            speed: 500
                        });
                    });

                    //    alert(HtmlM);
                    $('#bx-pager').html(htmlT);

                    alert(HtmlM);
                    $('.bxslider').html(HtmlM);




                },

                failure: function (data) {
                    alert(data.d);
                },
                error: function (msg) {
                    alert(data.d);
                }
            });

HTML

  <ul class="bxslider">

    </ul>

    <div id="bx-pager">

    </div>

我正在动态生成bxslider内容和寻呼机,但是当我这样做时,bxslider无效。 它同时给了我两个li

是遇到同样问题的人。请帮助

修改

 <ul class="bxslider">
        <li>
    <img height="0" width="200" src="/uploads/1439/JW011757635132099477986331_thumb.jpg" alt="Trendy Sea Bamboo and Pearl Stretch Bracelet">
    <img height="0" width="200" src="/uploads/1436/RadioEditCreme635131946925232435_thumb.jpg" alt="RADIO EDIT CREME CLASSIC CLUTCH">

    </li>
 <li>
    <img height="0" width="200" src="/uploads/1439/JW011757635132099477986331_thumb.jpg" alt="Trendy Sea Bamboo and Pearl Stretch Bracelet">
    <img height="0" width="200" src="/uploads/1436/RadioEditCreme635131946925232435_thumb.jpg" alt="RADIO EDIT CREME CLASSIC CLUTCH">

    </li>
    </ul>

enter image description here

1 个答案:

答案 0 :(得分:0)

this你想要完成什么(使用寻呼机)?这只是一个如何创建bxSlider的简单示例。

                var slider = $('.bxslider').bxSlider({
                    mode: 'fade',
                    captions: false
                });

                $('#reload-slider').click(function (e) {
                    e.preventDefault();
                    slider.reloadSlider({
                        mode: 'fade',
                        auto: true,
                        pause: 1000,
                        speed: 500
                    });
                });