Question

我做了几个小时的研究，但我找不到任何足够接近我正在寻找的东西。如果你知道类似的话题，请发布链接。

我对js的经验不多。我想创建一个简单的小画廊。我在网站上有一张图片。单击时，图像应替换为另一个（image2）。当我现在点击这个时，它应该被image3替换，依此类推。我试过跟随，但这根本不起作用。

JS

$('.image1').click(function() {
    $(this).attr('src', 'image2.jpg');
    $(this).addClass('image2');
});

$('.image2').click(function() {
    $(this).attr('src', 'image3.jpg');
    $(this).addClass('image3');
});

... 当我得到最后一张图片时（例如＆＃34; image10＆＃34;），图库应该转到开头（图片1）。

thx求助

Answer 1

写这样的东西。您不需要10个不同的事件处理程序。

创建一个公共类..例如imageClass

$(document).on('click', '.imageClass', function () {
    var src = $(this).attr('src'); //image1.png
    var index = src.split('.')[0].replace('image',''); //get index `1`
    //add 1 to index or reset to first image
    index = (index == "10") ? 1 : parseInt(index) + 1;
    $(this).attr('src', 'image' + index + '.jpg');
});

Answer 2

你正在寻找一个名为Carousel的东西，你在github上有很多开源实现。其中最常用的是Lightbox：https://github.com/lokesh/lightbox2/blob/master/js/lightbox.js

代码不是很长，您应该“轻松”（在引号之间：p）找到您的页面所需的部分内容。

Answer 3

使用index（）显示确实有意义：

Fiddle

JS代码

$('.image').first().show();
$('.image').on('click', function () {
  target = $('.image:visible').index();
  lastElem = $('.image').length -1; //2 cause 3 images..
  target === lastElem ? target = 0 : target = target + 1;
  $('.image').hide()
  $('.image').eq(target).show();
});

除了第一张图像之外的所有图像最初都是隐藏的。

图库/点击图片，将其替换为新图片

3 个答案: