javascript - 来自带有缩略图的 JS 数组的 Jquery 或 JavaScript 图像 slider

Question

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

我有一个带有缩略图的 JQuery 图片库自动 slider 代码，工作正常。但是，如您所见，目标图像都放在 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();
});