когда мышь над изображением, слайд запускается как изображение GIF - PullRequest
Новая
       5

когда мышь над изображением, слайд запускается как изображение GIF

0 голосов
/ 14 февраля 2012

У меня 5 изображений в одной папке.1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg Я буду показывать только одно изображение на моей веб-странице.пример 

<body>
<img src="1.jpg">
</body>

когда посетитель наведет курсор мыши на изображение, изображение изменится на 2.jpg, а 3.jpg и .... будет остановлено на 5.jpg. Слайд-шоу похоже на gifimage.
Пожалуйста, Как написать javascript или jquery.
Пожалуйста, скажите мне самый простой способ.
Спасибо, мой дорогой друг.
Я нашел на этом небольшом вопросе вопрос. Но я не могу найти полный ответ дляme.
Если этот вопрос повторяется, извините
пожалуйста, прости меня за плохое использование английского языка.

1 Ответ

1 голос
/ 14 февраля 2012

Вы можете использовать событие наведения jQuery и передать методы onenter и onout. При вводе вы можете позвонить и установить интервал для увеличения номера вашего изображения, а затем вы хотите остановить его, очистив свой интервал. 

<!DOCTYPE html>
<html>
  <head>
    <title>image</title>        
  </head>
  <body>

    <img id="img" src="1.jpg" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
      var interval = null;
      function changeImage(){
        var nextNum = parseInt($('#img').attr('src').replace('.jpg',''), 10) + 1;
        // If you want it to repeat back to 1 after 5
        nextNum = nextNum > 5 ? 1 : nextNum;
        $('#img').attr('src', nextNum+'.jpg');
      }

      $('#img').hover(
        function(){
          // Call change Image every 50ms
          interval = setInterval(changeImage, 50);
          changeImage();
        },
        function(){
          // Stop the call
          interval && clearInterval(interval);
        }
      );
    </script>
  </body>
</html>​​​​​​​​​​​​
...