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

Question

请帮助，JavaScript 和 Jquery 专家， 如何制作带有缩略图的自动图库滑块，目标图像的源路径存储在 Java Script 数组中？

我有一个带有缩略图的 JQuery 图片库自动滑块代码，效果很好。但是，正如您所看到的，目标图像都放在 html 中的无序列表中。我需要的是目标图像（即img src）在JS数组中，所以我需要修改我的JS脚本，但我不知道怎么做。所以，我不想要 html 列表中的图像，我只想要一个带有图像的 div，其中源在 JS 数组中。我已经有了用 PHP 数组制作的 JS 数组。

 <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

您必须循环遍历数组才能创建图像元素。
然后将其附加到li。
然后将所有li 附加到ul 类triggers。
然后将此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>