1

我目前正在使用由以下人员填充的图像轮播

$.each(get_images, function(i,img){
 $('#container ul').append('<li><a href="#" class="thumbnail"><img src="'+img+'"/></a></li>'); 
});

我想做的只是让它由一个 var 数组填充。我想这样做是因为我想使用相同的轮播，但更改由 switch 语句触发的轮播中的项目

这是整个旋转木马。

$.each(get_images, function(i,img){
 $('#container ul').append('<li><a href="#" class="thumbnail"><img src="'+img+'"/></a></li>'); 
});

var pages = $('#container li'), btn = $('#container .button');
var currentPage, nextPage;

var handler = function () {
$('#container img')
        .css("width", "679px")
        .css("height", "422px");
btn.unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
    if (current <= 0) current = pages.length - 1;
    else current = current - 1;
    nextPage = pages.eq(current);
    $(".box_counter")
            .css("background-color" , "white")
            .eq(current).css("background-color" , "red");
    console.log(current);

    nextPage.css("marginLeft", -679);
    nextPage.show();
    nextPage.animate({
        marginLeft: 0
    }, 400,'easeInCubic',  function () {
        currentPage.hide();
    });
    currentPage.animate({
        marginLeft: 679
    }, 400,'easeInCubic', function () {
        btn.bind('click', handler);
    });
} else {

    if (current >= pages.length - 1) current = 0;
    else current = current + 1;
    nextPage = pages.eq(current);

    $(".box_counter")
            .css("background-color" , "white")
            .eq(current).css("background-color" , "red");
     console.log(current);
    nextPage.css("marginLeft", 679);
    nextPage.show();
    nextPage.animate({
        marginLeft: 0
    }, 400,'easeInCubic', function () {});
    currentPage.animate({
        marginLeft: -679
    }, 400,'easeInCubic', function () {
        currentPage.hide();
        btn.bind('click', handler);
    });
  }
}
 btn.click(handler);
4

0 回答 0