Изменение фона при щелчке и пропуске первого элемента на плате

Я просто написал простой сценарий, чтобы изменить фон на щелчок, и проблема во втором повторении, когда первый элемент в плате опущен вот мой код

$(function() {
    var i = 0;
    var preloadImg = [
        'https://www.colourbox.com/preview/11903964-black-and-white-embossed-paper-background-lighting-effect.jpg',
        'http://download.4-designer.com/files/20140222/Personalized-lobes-mosaic-background-vector-material-57935.jpg',
        'http://www.tabletwallpapers.org/download/peak-wallpaper_800x800.png',
        'https://s29.postimg.org/51x27g4dj/save_world_colo2r.jpg'
    ];

    $(".right").click(function() {
        if (i < preloadImg.length) {
            $('.back').css('background-image', 'url(' + preloadImg[i] + ')');
        } else if (i == preloadImg.length) {
            i = 0;        
        }
        i++;
    });
});

Вот это: Demo

3 ответа

  1. Вот вы идете

    $(function() {
    
      var i = 0;
      var preloadImg = ['http://www.tabletwallpapers.org/download/peak-wallpaper_800x800.png','https://www.colourbox.com/preview/11903964-black-and-white-embossed-paper-background-lighting-effect.jpg','http://download.4-designer.com/files/20140222/Personalized-lobes-mosaic-background-vector-material-57935.jpg','https://s29.postimg.org/51x27g4dj/save_world_colo2r.jpg'];
    
      $(".right").click(function() {
    
        if(i<preloadImg.length) {
          $('.back').css('background-image', 'url(' + preloadImg[i] + ')');
          i++;
          if(i==preloadImg.length) {
            i = 0;  
          }
        }
      });
    });
    
  2. Не уверен, что я полностью понимаю, что вы говорите, но если это тот случай, когда вы пропускаете первое изображение после полного цикла, есть несколько способов исправить это, самый простой-просто установить свой образ в другой части…

    https://jsfiddle.net/ux5a8e0o/12/

        if (i < preloadImg.length) {
          $('.back').css('background-image', 'url(' + preloadImg[i] + ')');
    
        } else if (i == preloadImg.length) {
          i = 0;
          $('.back').css('background-image', 'url(' + preloadImg[i] + ')');
        }
        i++;
    

    Однако есть более элегантные способы…

  3. Возможно, вы можете попробовать это:

    $(".right").click(function(){               
          if(i==preloadImg.length){
             i = 0;
          }
          $('.back').css('background-image', 'url(' + preloadImg[i] + ')');
          i++;
    });
    

    Вот скрипка