Пользовательские элементы управления, которые не работают для цикла изображения

-1

Я пробовал его в функции цикла, но он говорит, что функция не используется, поэтому я помещаю ее снаружи, но не работает, и я не знаю, как ее исправить, поскольку я думал, что это сработает , rmember первый день на javascript, спасибо за помощь заранее и, пожалуйста, не jquery.Пользовательские элементы управления, которые не работают для цикла изображения

<html> 
    <head> 
     <style type="text/css"> 
      #PictureContainer { 
       height: 300px; 
       width: 500px; 
       margin: 0 auto; 
       overflow: hidden; 
       display: inline-block; 
      } 

      #SliderWrapper { 
       width: 628px; 
       height: 300px; 
       margin: 0 auto; 
       overflow: hidden; 
      } 

      #image { 
       height: 300px; 
       width: 500px; 
      } 

      #Next { 
       float: right; 
      } 

      #Before { 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="SliderWrapper"> 
      <a href="#" onclick="Forward(); return false;"><img id="Next" src="Forward.png" alt="Forward"></a> 
      <a href="#" onclick="Back(); return false;"><img id="Before" src="Back.png" alt="Back"></a> 
      <div id="PictureContainer"> 
       <img id="image" src="html.png" alt="HTML"> 
      </div> 
     </div> 

     <script language="javascript" type="text/javascript"> 

      var i = 1; 

      function loop() { 
       i = i+1; 
        if(i == 5){ 
         i = 1; 
        } 
       if (i == 1) { 
        document.getElementById('image').src = "html.png"; 
       } else if(i == 2) { 
        document.getElementById('image').src = "css3.png"; 
       } else if (i == 3) { 
        document.getElementById('image').src = "WebdevLogo's.jpg"; 
       } else { 
        document.getElementById('image').src = "WebdevLogo's.jpg"; 
       } 


      } 
       var pictureloop = setInterval(loop, 3000); 

      function Forward() { 
       if(i == 5) { 
        i = 1; 
       } else { 
        i = i+1; 
       } 
      } 

      function Back() { 
       if(i == 1) { 
        i = 4; 
       } else { 
        i = -1; 
       } 
      } 

     </script> 

    </body> 
</html>

источник

2014-02-18 Tom

Какая у вас ошибка? –

Функция вперед и назад не работает так, как должна, они должны сделать цикл назад и вперед одним изображением. – Tom

У вас есть функция, называемая loop, но вы ее никогда не называете, поэтому она никогда не меняет атрибут источника изображения. В функции «вперед» и «назад» добавьте вызов функции цикла в конце. Также есть внутренние проблемы с Back(), которые я исправил.

function Forward() { 
      if(i == 5) { 
       i = 1; 
      } else { 
       i++; 
      } 
      loop(); 
     } 

     function Back() { 
      if(i == 1) { 
       i = 5; 
      } else { 
       i--; 
      } 
      loop(); 
     }

В функции цикла(), рекомендуется использовать switch block вместо всех тех либо еще МФС. Также в функции цикла используйте оператор increment - i ++; - который увеличивает значение на 1, а не ручную инструкцию i = i + 1; Кроме того, оператор if == 5 является избыточным. У вас уже есть функция Forward.

источник

2014-02-18 18:28:13 larsAnders

спасибо всем, что я должен был сделать, поместил loop() в функции благодаря помощи. – Tom

Нет проблем. Внимательно посмотрите на ответ Sonic Soul. Хорошо. Тем временем, если бы вы могли принять мой ответ, это было бы здорово. – larsAnders

он работает, но вместо того, чтобы идти 1 картинка вперед или назад, она идет 2, я думаю, что это связано с тем, что цикл работает в одно и то же время? – Tom

Это больше подходит для https://codereview.stackexchange.com/, но вот несколько вещей, которые сделают этот код более чистым.

вместо дублирования кода изображения, объявите массив изображений.

var images = ['img1.png','img2.png']; 
var currentImage = 0; 

function forward() { 
    currentImage++; 
    if (currentImage > images.length-1) currentImage == 0; 
    setImage() 
} 

function setImage() { 
    document.getElementById('image').src = images[currentImage]; 
} 

setInterval(forward, 5000);

источник

2014-02-18 18:33:19

Спасибо за помощь, хотя я не использовал то, что вы сказали, спасибо за попытку, поскольку я не очень понимаю это. – Tom

Единственная разница - это добавленный массив. в противном случае это так же, как ваш код «currentImage» имел место «i» .. –

Пользовательские элементы управления, которые не работают для цикла изображения

ответ

Смежные вопросы