Question

     <div id="bx-pager">
        <a data-slide-index="0" href=""><img src="/images/thumbs/tree_root.jpg" /></a>
        <a data-slide-index="1" href=""><img src="/images/thumbs/houses.jpg" /></a>
        <a data-slide-index="2" href=""><img src="/images/thumbs/hill_fence.jpg" /></a>
     </div>

我正在使用

bxslider

并尝试动态生成thumnail图像，并具有上面给出的确切格式。

我的代码：

                var container = document.getElementById('check');
                var divid = document.createElement('bx-pager');

                divid.id = 'bx-pager';


                for (var i = 0; i < Math.min(myObject.data.length, 10) ; i++) {
                    var friendItem = document.createElement('span');
                    var img = '<a data-slide-index="' + i + '" href=""><img src="' + myObject.data[i].pic_square + '"/></a>';

                    friendItem.innerHTML = img;
                    divid.appendChild(friendItem);
                }
                container.appendChild(divid);

但是我的工作不起作用并且没有显示任何图像我如何将一个href一个接一个地放在jquery中？

已解决

Answer 1

我为你创造了小提琴http://jsfiddle.net/L5S2B/2/ 请检查一下。它应该对你有所帮助。如果这不是您想要的，请随时回来。

以下是小提琴的代码

<强>的Javascript

// declare global
var slider_array = new Array();

jQuery(document).ready(function($){
    var htmlT = "";
    for( var i = 0; i <=2; ++i ) {
        htmlT += '<li><a href="/test'+i+'">Slide '+i+'</a></li>';
    }
    $('.bxslider').html(htmlT);
    // launch bxslider
    $('.bxslider').each(function(i){
        slider_array[i] = $(this).bxSlider({controls:false});
    });


    // bind controls on custom controls, and run functions on every slider
    $('.bxslider-controls a').bind('click', function(e) {
      e.preventDefault();

      if($(this).hasClass('pull-left')) {
        $.each(slider_array, function(i,elem){
          elem.goToPrevSlide();  
        });

      } else if($(this).hasClass('pull-right')) {
        $.each(slider_array, function(i,elem){
          elem.goToNextSlide();  
        });
      }

    });

});

<强> HTML

<body>

    <!-- slider 1 -->
    <ul class="bxslider">
    </ul>

    <!-- custom controls -->
    <div class="bxslider-controls">
      <a class="pull-left" href="#">PREV</a>
      <a class="pull-right" href="#">NEXT</a>
    </div>

</body>

动态生成缩略图图像到bxslider

1 个答案: