javascript - 动态生成缩略图到 bxslider-6ren

javascript - 动态生成缩略图到 bxslider

转载作者：行者123 更新时间：2023-11-28 08:36:42

     <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

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

我的代码:

                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);

但是我的不起作用，什么也不显示，没有图像如何在 jquery 中将 a href 一个接一个地放置？

已解决

最佳答案

我已经为你创建了 fiddle http://jsfiddle.net/L5S2B/2/请检查一下。它应该对你有帮助。如果这不是您想要的，请随时返回。

下面是 fiddle 的代码

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>

关于javascript - 动态生成缩略图到 bxslider，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21052551/