Hello!

I am writing code for a slide in a certain diva.

Can not replace the picture. What could be the problem with this code?

  • I tried 3 options and do not work, what could be the problem? I do not get any errors in the console and in the IDE!

var images = [ "BackgroundSlideImages/italy-1587287.jpg", "BackgroundSlideImages/stream-1149882_1920.jpg", "BackgroundSlideImages/thimble-1597514_1920.jpg", "BackgroundSlideImages/mountain-1543308.jpg", "BackgroundSlideImages/maligne-river-1485060_1920.jpg", "BackgroundSlideImages/camping-1289930_1920.jpg", "BackgroundSlideImages/beach-1092734_1920.jpg", "BackgroundSlideImages/malaysia-911580.jpg", "BackgroundSlideImages/night-839807.jpg", "BackgroundSlideImages/sunset-1373171.jpg", "BackgroundSlideImages/cycling-1533265_1920.jpg", "BackgroundSlideImages/swim-422546_1920.jpg", "BackgroundSlideImages/sea-79606_1920.jpg", "BackgroundSlideImages/paragliding-1219999_1280.jpg", "BackgroundSlideImages/ski-247787_1920.jpg", "BackgroundSlideImages/snowboarder-1261844_1920.jpg", "BackgroundSlideImages/water-fight-442257_1920.jpg", "BackgroundSlideImages/family-591581_1920.jpg", "BackgroundSlideImages/pregnant-422982_1920.jpg" ]; var imageCounter = 0; var element = $("<img src="+images[imageCounter]>+">"); var image = $(".content"); image.append(element); setInterval(function () { var img = imageCounter++; image.fadeOut(1000,function () { $("img").attr("src",images[img]); image.fadeIn(1000); }); if (img == images.length){ img = 0 ; $("img").attr("src",images[img]); } },10000); // Не работает, что можно сделать по другому ? ================================================================= var imageCounter = 0; //var element = $("<img src="+images[imageCounter]>+">"); var image = $("#img-page"); // var image = $(".content"); //image.append(element); setInterval(function () { var img = imageCounter++; image.fadeOut(1000,function () { image.src = images[img]; image.fadeIn(1000); }); if (img == images.length){ img = 0 ; image.src = images[img]; } },10000); //Этот тоже не работает! ======================================================================= var imageCounter = 0; var element = $("<img src="+images[imageCounter]>+">"); var image = $(".content"); image.append(element); setInterval(function () { var img = imageCounter++; image.fadeOut(1000,function () { element.src = images[img]; image.fadeIn(1000); }); if (img == images.length){ img = 0 ; element.src = images[img]; } },10000); // Этот вариант тоже не работет! ======================================================================= 
 .content{ border: solid; color: brown; min-width: 100%; max-width: 100%; } .content > img { width: 99%; max-width: 99%; min-width: 99%; min-height: 775px; max-height: 775px; } 
  <div class="content"> тут должна быть картина, элемент создаю динамически <div class="home-content" id = "home-page"> Home </div> </div>

    2 answers 2

    So do not right, but ....

     var images = [ "http://www.evilbeetgossip.com/wp-content/uploads/2010/08/ladygaga_i-d.jpg", "http://www.evilbeetgossip.com/wp-content/uploads/2010/08/gaga_id_11.jpg", "http://www.evilbeetgossip.com/wp-content/uploads/2010/08/gagaid.jpg", "http://www.evilbeetgossip.com/wp-content/uploads/2010/08/gaga_id_10.jpg" ]; var imageCounter = 0; var element = $("<img src=" + images[imageCounter] + ">"); var image = $(".content"); image.append(element); setInterval(function() { imageCounter++; image.fadeOut(500, function() { $("img").attr("src", images[imageCounter]); image.fadeIn(500); }); if (imageCounter == images.length) { imageCounter = 0; image.fadeOut(500, function() { $("img").attr("src", images[imageCounter]); image.fadeIn(500); }); } }, 1500); 
     .content { border: solid; color: brown; max-width: 300px; } img{ max-width: 300px; max-height: 500px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="home-content" id="home-page"> </div> </div>

    • performed on your advice, does not work! I add the code. - Maks.Burkov September

    Probably something like this should be.

     var images = [ "BackgroundSlideImages/italy-1587287.jpg", "BackgroundSlideImages/stream-1149882_1920.jpg", "BackgroundSlideImages/thimble-1597514_1920.jpg", "BackgroundSlideImages/mountain-1543308.jpg", "BackgroundSlideImages/maligne-river-1485060_1920.jpg", "BackgroundSlideImages/camping-1289930_1920.jpg", "BackgroundSlideImages/beach-1092734_1920.jpg", "BackgroundSlideImages/malaysia-911580.jpg", "BackgroundSlideImages/night-839807.jpg", "BackgroundSlideImages/sunset-1373171.jpg", "BackgroundSlideImages/cycling-1533265_1920.jpg", "BackgroundSlideImages/swim-422546_1920.jpg", "BackgroundSlideImages/sea-79606_1920.jpg", "BackgroundSlideImages/paragliding-1219999_1280.jpg", "BackgroundSlideImages/ski-247787_1920.jpg", "BackgroundSlideImages/snowboarder-1261844_1920.jpg", "BackgroundSlideImages/water-fight-442257_1920.jpg", "BackgroundSlideImages/family-591581_1920.jpg", "BackgroundSlideImages/pregnant-422982_1920.jpg" ]; var imageCounter = 0; //var element=$("<img src="+"images[imageCounter]>"+"+"); var image=$("#dinamic_image"); //image.append(element); setInterval(function () { //var img=imageCounter++; image.fadeOut(1000,function () { dinamic_image.src=images[imageCounter]; image.fadeIn(1000); }); if (++imageCounter==images.length){ imageCounter=0; } },10000); 
     .content{ border: solid; color: brown; min-width: 100%; max-width: 100%; } .content > img { width: 99%; max-width: 99%; min-width: 99%; min-height: 775px; max-height: 775px; } 
      <div class="content"> <img id="dinamic_image"> <div class="home-content" id = "home-page"> Home </div> </div>