Question

我在我的网站上使用Marco的'背景图片滑块'。链接到下面的背景滑块演示/文档。

（http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html）

我想要做的是添加一些简单的缩略图，以便将用户转发到他们选择的滑块中的图像。像< o o o o o >这样的东西，你可以想象第二个'o'会带你到第二个图像，依此类推。

我正在尝试寻找一些可以用来控制当前幻灯片的变量或其他东西，但我没想出任何运气。

下载插件代码的副本

/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow
var slideshowSpeed = 6000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
    "title" : "",
    "image" : "image_1.jpg",
    "url" : "",
    "firstline" : "",
    "secondline" : ""
}, {
    "title" : "",
    "image" : "image_2.jpg",
    "url" : "",
    "firstline" : "",
    "secondline" : ""
}, {
    "title" : "",
    "image" : "image_3.jpg",
    "url" : "",
    "firstline" : "",
    "secondline" : ""
}, {
    "title" : "",
    "image" : "image_4.jpg",
    "url" : "",
    "firstline" : "",
    "secondline" : ""
}, {
    "title" : "",
    "image" : "image_5.jpg",
    "url" : "",
    "firstline" : "",
    "secondline" : ""
}, {
    "title" : "",
    "image" : "image_6.jpg",
    "url" : "",
    "firstline" : "",
    "secondline" : ""
}, {
    "title" : "",
    "image" : "image_7.jpg",
    "url" : "",
    "firstline" : "",
    "secondline" : ""
}
];



$(document).ready(function() {

// Backwards navigation
$("#back").click(function() {
    stopAnimation();
    navigate("back");
});

// Forward navigation
$("#next").click(function() {
    stopAnimation();
    navigate("next");
});

var interval;
$("#control").toggle(function(){
    stopAnimation();
}, function() {
    // Change the background image to "pause"
    $(this).css({ "background-image" : "url(img/btn_pause.png)" });

    // Show the next image
    navigate("next");

    // Start playing the animation
    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);
});


var activeContainer = 1;    
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
    // Check if no animation is running. If it is, prevent the action
    if(animating) {
        return;
    }

    // Check which current image we need to show
    if(direction == "next") {
        currentImg++;
        if(currentImg == photos.length + 1) {
            currentImg = 1;
        }
    } else {
        currentImg--;
        if(currentImg == 0) {
            currentImg = photos.length;
        }
    }

    // Check which container we need to use
    var currentContainer = activeContainer;
    if(activeContainer == 1) {
        activeContainer = 2;
    } else {
        activeContainer = 1;
    }

    showImage(photos[currentImg - 1], currentContainer, activeContainer);

};

var currentZindex = -1;
var showImage = function(photoObject, currentContainer, activeContainer) {
    animating = true;

    // Make sure the new container is always on the background
    currentZindex--;

    // Set the background image of the new active container
    $("#headerimg" + activeContainer).css({
        "background-image" : "url(img/" + photoObject.image + ")",
        "display" : "block",
        "z-index" : currentZindex
    });

    // Hide the header text
    $("#headertxt").css({"display" : "none"});

    // Set the new header text
    $("#firstline").html(photoObject.firstline);
    $("#secondline")
        .attr("href", photoObject.url)
        .html(photoObject.secondline);
    $("#pictureduri")
        .attr("href", photoObject.url)
        .html(photoObject.title);


    // Fade out the current container
    // and display the header text when animation is complete
    $("#headerimg" + currentContainer).fadeOut(function() {
        setTimeout(function() {
            $("#headertxt").css({"display" : "block"});
            animating = false;
        }, 500);
    });
};

var stopAnimation = function() {
    // Change the background image to "play"
    $("#control").css({ "background-image" : "url(img/btn_play.png)" });

    // Clear the interval
    clearInterval(interval);
};

// We should statically set the first image
navigate("next");

// Start playing the animation
interval = setInterval(function() {
    navigate("next");
}, slideshowSpeed);

});

我的script.js文件中的解雇代码的副本

    //index page image preloading code
    var imgArr = new Array( // relative paths of images
        'img/image_1.jpg',
        'img/image_2.jpg',
        'img/image_3.jpg',
        'img/image_4.jpg',
        'img/image_5.jpg',
        'img/image_6.jpg',
        'img/image_7.jpg'
    );

    var preloadArr = new Array();
    var i;

    /* preload images */
    for(i=0; i < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }

Answer 1

您可以尝试 WOW Slider

它说“你可以为子弹导航创建缩略图预览”。

Answer 2

我查看了插件代码，看起来你有两个选择：

破解插件代码以满足您的需求
选择另一个包含更多选项的插件，例如：http://goo.gl/RKYfS

要将该功能添加到当前插件，您可以尝试：

首先 - 启用索引显示图像（更新插件中的“导航”功能）：

var navigate = function(direction) {

    // Check if no animation is running. If it is, prevent the action
    if(animating) return;

    // Check which current image we need to show
    if(direction == "next") {
        currentImg++;
        if(currentImg == photos.length + 1) currentImg = 1;
    } 
    else if (direction == "back"{
        currentImg--;
        if(currentImg == 0) currentImg = photos.length;
    }
    else if (typeof direction === 'number') {
        currentImg = direction;
    }

    // Check which container we need to use
    var currentContainer = activeContainer;
    if(activeContainer == 1) activeContainer = 2;
    else activeContainer = 1;

    showImage(photos[currentImg - 1], currentContainer, activeContainer);
};

第二 - 使用图像索引调用函数：

$("#img1").on('click', function() {
    stopAnimation();
    navigate($(this).index());
});

Answer 3

HTML

（假设“circle.png”是＆lt; o o o＆gt;控制图像）

<ul>
  <li><a id="slide1"><img src="circle.png" /></a></li>
  <li><a id="slide2"><img src="circle.png" /></a></li>
  <li><a id="slide3"><img src="circle.png" /></a></li>
   ....
</ul>

的jQuery

看一下插件代码，似乎“currentImg”变量决定了哪些图像在后台显示，所以如果你设置jQuery来改变那个变量的值，它应该可以解决。

$('#slide1').click(function() {
   stopAnimation();
   currentImg = 1;
});

$('#slide2').click(function() {
   stopAnimation();
   currentImg = 2;
});
 ....

......等等。

希望能帮到你，或者至少让你走上正轨。可能有点乱，但这就是我要做的事情。

jQuery图像滑块 - 添加SIMPLE缩略图控件功能

3 个答案: