JQuery не меняет изображение

Question

Прежде всего, я должен сказать, что я совершенно новый для JQuery. Я следую учебнику в w3schools. У меня есть сайт с изображением и некоторым текстом (h1). Я хочу изменить фоновое изображение через некоторое время. Я использовал JQuery ниже, но это не работает (ничего не происходит)

Мой код заключается в следующем:

<div class="fullscreen-bg"> 
     <img src="~/Content/Images/Portada2.png" class="fullscreen-bg__img" id="cover"> 
</div> 

<div class="container page-header text-center"> 
     <h1 class="animated zoomIn" style="font-size:5em">Pizzeria Britannia</h1> 
</div> 

<script> 
     $(document).ready(function(){ 
      var urlArray = [ 
       '~/Content/Images/Portada2.png', '~/Content/Images/retina_wood_2X.png', 
      ]; 
      var slideShowTimings = 2000; 
      var i = 0 
      setInterval(function() { 
       var $img = $('img'); 
       $img.hide(slow, function() { 
        $img.attr('.src', urlArray[++i % urlArray.length]); 
        $img.show(fast) 
       }); 
      }, slideShowTimings); 
     }); 
</script> 

Есть ли у вас какие-либо идеи?

Answer 1

• Вам не нужен никакой $ перед вашим переменными в JavaScript
• Вы имели перед вашим «ЦСИ» в . в ваших attr изменений
• Отсутствующих полу-колоны
• Вы были используя символ %, но я не уверен, почему поэтому я заменил его тройным, если он сбрасывает 0 0
• fast и slow необходимые кавычки для работы, поскольку они являются строками, а не переменными

Возможно, другие вопросы?

<script> 
     $(document).ready(function(){ 
      var urlArray = [ 
       '~/Content/Images/Portada2.png', '~/Content/Images/retina_wood_2X.png', 
      ]; 
      var slideShowTimings = 2000; 
      var i = 0; 
      setInterval(function() { 

       // Increase i 
       i++; 

       // Set the value of i and loop back to 0 if desired 
       i = (i > urlArray.length) ? i : 0; 

       var img = $('img'); 
       img.hide('slow', function() { 
        img.attr('src', urlArray[i]); 
        img.show('fast'); 
       }); 
      }, slideShowTimings); 
     }); 
</script>