jQuery或JavaScript图像滑块带有缩略图的JS数组

Question

请帮助，javascript和jQuery专家，如何使用缩略图制作自动图像库滑块，其中目标图像的源路径存储在Java脚本数组中？

我有一个带有缩略图的jQuery Image库自动滑块代码，可以正常工作。但是，如您所见，目标图像都放在HTML中的无序列表中。我需要的是目标图像(即IMG SRC(在JS数组中，因此我需要修改JS脚本，但我不知道如何。因此，我不希望在HTML列表中进行映像，我只想要一个带有JS数组中哪个源的div。我已经有了我的JS数组，该数组是由PHP阵列制成的。

 <script type="text/javascript">
    var imgs = <?php echo json_encode($images); ?>;
</script>

预先感谢!!

    //IMAGE GALLERY
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(800).eq(target).fadeIn(800);
    triggers.removeClass('active').eq(target).addClass('active');
}
triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});
$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

Answer 1

您可以尝试这样的事情，而无需更改脚本：

var imgs = <?php echo json_encode($images); ?>;
//create a list of img for each src in your array wrapped inside a li element
var _tmpl = "";
for(var k=0; k < imgs.length; k++){
    _tmpl+="<li><img src='"+imgs[k]+"' /></li>";
}
//then append the string inside wrapper the ul.images
var images = $(_tmpl);
var wrapper = $('ul.images');
images.appendTo(wrapper);
//then your script to create the slider
var triggers = $('ul.triggers li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(800).eq(target).fadeIn(800);
    triggers.removeClass('active').eq(target).addClass('active');
}
triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});
$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

Answer 2

您必须循环trougth数组才能创建图像元素。
然后将其附加到li。
然后将所有li附加到具有triggers类的ul。
然后将此ul附加到您的页面。

您的其余脚本保持不变。

//var imgs = <?php echo json_encode($images); ?>;
var imgs = [
  "http://www.branfere.com/upload/Image/univers/univers08.jpg",
  "http://www.branfere.com/upload/Image/animaux/capucin01.jpg",
  "http://www.branfere.com/upload/Image/animaux/girafe01.jpg",
  "http://www.branfere.com/upload/Image/animaux/lemurien05.jpg",
];
var container = $("#ulContainer");
var list = $("<ul>").attr("class","triggers");
for(i=0;i<imgs.length;i++){
  var item = $("<li>");
  var img = $("<img>").attr("src",imgs[i]);
  item.append(img);
  list.append(item);
}
container.append(list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ulContainer"></div>