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

Question

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

我有一个 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 附加到带有 class 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>

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

Jquery or JavaScript image slider from JS array with thumbnails

html

javascript

jquery

image-gallery