Javascript photo photo слайд-шоу

-1

Я хочу сделать снимок слайд-шоу, как в верхней части этой страницы http://www.southamptontaxis.org/our-partners/. Все, что я хочу, это делать только с Javascript, без CSS, без jQuery. Я пробовал, но я не могу этого сделать, мне нужна помощь, а не полный код, конечно, полезный совет. Спасибо.Javascript photo photo слайд-шоу

Вот мой плохой код ...

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <style> 
      #container { 
       position: relative; 
       width: 1000px; 
       height: 420px; 
       overflow: hidden; 
      } 
      img { 
       position: absolute; 
       top: 0px; 
       left: 0px; 
       width: 1000px; 
       height: 420px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <img src="our-partners.jpg"> 
      <img src="index.jpg"> 
      <img src="our-taxis.jpg"> 
      <img src="pre-book.jpg"> 
      <img src="join-us.jpg"> 
      <img src="news.jpg"> 
      <img src="contact.jpg"> 
     </div> 
     <script> 
      var container = document.getElementById("container"); 
      var imgElems = container.querySelectorAll("img"); 
      var timer = setInterval(f1, 200); 
      var n = 0; 
      var i = 0; 
      function f1() { 
       var elem = imgElems[i]; 
       elem.style.left = n + "px"; 
       n--; 
       i++; 
       if (n === (-1000)) { 
        n = 0; 
       } 
      } 
     </script> 
    </body> 
</html>

источник

2014-08-19 marmelada

Вы не можете сделать слайд-шоу без CSS. В любом случае у вас уже есть CSS. Очевидно, что с вашим кодом он не будет работать. Вы увеличиваете 'i' также каждый раз, чтобы он выходил за рамки и каждый раз, когда вы анимали следующее изображение на несколько пикселей влево. – putvande

Благодарю вас, вы правы JS + CSS, но не jQuery, где я должен поместить i increment? как заставить скрипт работать? – marmelada

Попробуйте этот код, может помочь. http://www.szcchina.com/blog/photo-slideshow-code.html http://www.jsmadeeasy.com/javascripts/images/list_test.asp

В случае, если вы попробуете JQuery для достижения лучших результатов, попробуйте этот код:

<script type="text/javascript"> 
    $("#slideshow > div:gt(0)").hide(); 
    setInterval(function() { 
    $('#slideshow > div:first') 
     .fadeOut(2000) 
     .next() 
     .fadeIn(2000) 
     .end() 
     .appendTo('#slideshow'); 
    }, 3000); 
</script> 


<div id="slideshow"> 
<div> 
<img src="samsung.jpg" style="width: 490px; height: 250px; border-style:ridge;"/> 
</div> 
<div> 
<img src="intel.jpg" style="width: 490px; height: 250px; border-style:ridge;"/> 
</div> 
<div> 
<img src="snap camera.jpg" style="width: 490px; height: 250px; border-style:ridge;"/> 
</div> 
<div> 
<img src="asus.jpg" style="width: 490px; height: 250px; border-style:ridge;"/> 
</div> 
<div> 
<img src="cam.jpg" style="width: 490px; height: 250px; border-style:ridge;"/> 
</div> 
</div>

источник

2014-08-19 12:31:52 user3655251

Javascript photo photo слайд-шоу

ответ

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