gpt4 book ai didi

javascript - 动态生成缩略图到 bxslider

转载 作者:行者123 更新时间:2023-11-28 08:36:42 25 4
gpt4 key购买 nike

     <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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com