Question

我们目前正在持有人（ch-item）中创建一个图像，如下所示：

<div class="ch-item ch-img-1" style="background: url(<?php echo get_template_directory_uri(); ?>/images/image1.jpg);">

如果可能的话，我们希望在单击时将此图像更改为另一个图像，并重复此过程六次，因此每次单击它都会更改为另一个图像。

我们非常感谢任何帮助。谢谢！

Answer 1

这是使用Javascript进行此操作的一种方法：

// Counter to keep track of which the current image is
var counter = 0;

// List of images
var images = [
    'http://cdn.cutestpaw.com/wp-content/uploads/2011/11/Seemly-l.jpg',
    'http://cdn.cutestpaw.com/wp-content/uploads/2011/11/Handsome-l.jpg',
    // Add more images here
];

window.onload = function () {
    // Get the container div
    var gallery = document.getElementById('gallery');

    // Run updateImage function on click
    gallery.addEventListener('click', updateImage);

    // Run updateImage on start
    updateImage();    
}

function updateImage() {
    // Get the container div
    var gallery = document.getElementById('gallery');

    // Set background image    
    gallery.style.backgroundImage = 'url(' + images[counter] + ')';

    // Update counter
    counter++;

    // Remove old class name
    if (counter == 1) { // Remove last
        gallery.className = gallery.className.replace(
            ' ch-img-' + images.length,
            ''
        );
    } else { // Remove previous
        gallery.className = gallery.className.replace(
            ' ch-img-' + (counter - 1),
            ''
        );
    }

    // Add new class name
    gallery.className = gallery.className + ' ch-img-' + (counter);

    // Reset counter when at the end of the images list
    if (counter == images.length) {
        counter = 0;
    }
}

这是一个可以尝试的JSFiddle：

https://jsfiddle.net/0tg6up0o/14/

单击时将图像更改为另一个

1 个答案: