单击以使用jquery更改背景图像

时间:2012-07-05 13:40:41

标签: javascript jquery slider

我是否可以编辑以下jQuery代码,以便用户可以选择背景图像而不是仅重复循环的图像?

我无法弄清楚如何将按钮选择器附加到每个图像。这是我Sprout theme之后的效果。

感谢。

jQuery(function () {

    var imgArr = new Array( // relative paths of images
    'images/k2-in-skies.jpg', 'images/k2.jpg', 'images/kunhar-river.jpg', 'images/mitre-peak-baltoro.jpg', 'images/musa-ka-musalla.jpg', 'images/nanga-parbat.jpg', 'images/naran-valley.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];
    }

    var currImg = 1;
    var intID = setInterval(changeImg, 6000);

    /* image rotator */

    function changeImg() {
        $('#bg-imagesq').animate({
            opacity: 0
        }, 1000, function () {
            $(this).css('background', 'url(' + preloadArr[currImg++ % preloadArr.length].src + ') top center no-repeat');
        }).animate({
            opacity: 1
        }, 1000);
    }

});

1 个答案:

答案 0 :(得分:0)

目前,您使用名为#bg-imagesq的修复元素ID。您需要做的是更改以使用img标记$('img')提取所有元素。如果您不想将代码应用于当前页面中的所有图像,则为特定图像添加虚拟css类并将其更改为$('.bg-imagesCssClass')(作为示例)。