JQUERY :: Auto Slideshow

Question

У меня есть требование, когда есть список div и автоматический переход по одному. У меня был код, в котором каждая ul/li перемещается с первого слайда на второй. Но мне нужно переместить div один за другим, а не весь слайд.

HTML

<div id="main">       
     <div id="container"> 
     <div id="content_1">  
      <div id="slider"> 
      <ul>     
       <li> 
        <div style="width:200px;height:200px;border:1px solid #000;float:left;">Div1 Content</div> 
        <div style="width:200px;height:200px;border:1px solid #000;float:left;margin-left:20px;">Div2 Content</div> 
        <div style="width:200px;height:200px;border:1px solid #000;float:left;margin-left:20px;">Div3 Content</div> 
       </li> 
       <li> 
        <div style="width:200px;height:200px;border:1px solid #000;float:left;">Div1 Content</div> 
        <div style="width:200px;height:200px;border:1px solid #000;float:left;margin-left:20px;">Div2 Content</div> 
        <div style="width:200px;height:200px;border:1px solid #000;float:left;margin-left:20px;">Div3 Content</div> 
       </li> 
       <li> 
        <div style="width:200px;height:200px;border:1px solid #000;float:left;">Div1 Content</div> 
        <div style="width:200px;height:200px;border:1px solid #000;float:left;margin-left:20px;">Div2 Content</div> 
        <div style="width:200px;height:200px;border:1px solid #000;float:left;margin-left:20px;">Div3 Content</div> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
</div> 

CSS

*, 
    *:before, 
    *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

    #main { border:1px solid green; margin:0px auto; overflow:hidden; padding:15px; width:695px; } 

    #container { margin:0 auto; position:relative; text-align:left; width:974px; margin-bottom:2em; } 

    #content_1 { position:relative; }   

    img { border:none; } 

    pre { display:block; padding:10px; border:1px solid #bae2f0; background:#e3f4f9; margin:.5em 0; width:674px; } 

    .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next { margin:0; padding:0; display:block; overflow:hidden; text-indent:-8000px; } /* image replacement */ 

    #prevBtn, #slider1prev { background:#c8c8c8; border:0px solid black; border-bottom-left-radius:10px; border-top-left-radius:10px; 
    display:block; height:220px; left:-12px; padding-left:3px; padding-top:99px; position:absolute; top:26px; width:30px; z-index:1000; } 

    #nextBtn, #slider1next { left:649px; padding-left:7px; background:#c8c8c8; border:0px solid black; border-bottom-right-radius:10px; border-top-right-radius:10px; 
    display:block; height:220px; padding-top:99px; position:absolute; top:26px; width:30px; z-index:1000; } 

    #slider ul, #slider li, #slider2 ul, #slider2 li { margin:0; padding:0; list-style:none; } 

    #slider2 { margin-top:1em; } 

SCRIPT

$(document).ready(function() 
          { 
          $("#slider").easySlider 
          ({ 
           auto: true, 
           continuous: true 
          }); 
          }); 

     #slider li, #slider2 li { height:268px; overflow: hidden; width:993px; border:0px solid red; } 

    #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a { display:block; position:relative; width:30px; height:77px; background:url([[pix:theme|left_icon]]) no-repeat 0 0; } 

    #nextBtn a, #slider1next a { background:url([[pix:theme|right_icon]]) no-repeat 0 0; } 

JS Fiddle

Answer 1

С JQuery plugin что вы U петь, вы не можете переместить человека div в теге li.

Плагин рассчитан на наличие одного слайда на li, а не на нескольких слайдах (div) на li. У вас есть несколько тегов div, поэтому вы видите результаты, которые вы есть. Он перемещает все 3 div в качестве одного слайда, потому что это то, что вы говорите ему.

Это то, что ваш HTML должен выглядеть следующим образом:

<div id="slider"> 
    <ul> 
     <li> 
      <div style="...;">Div1 Content</div> 
     </li> 
     <li> 
      <div style="...;">Div2 Content</div> 
     </li> 
     <li> 
      <div style="...;">Div3 Content</div> 
     </li> 
    </ul> 
</div> 

Ваш JavaScript не меняется.

$(document).ready(function() { 
    $("#slider").easySlider 
    ({ 
     auto: true, 
     continuous: true 
    }); 
}); 

И теперь код работает так, как должен. См. Это fiddle

Answer 2

Менеджер сроков Помогал мне выделять. Он использует Javascript Promised. Вам просто нужно внимательно прочитать текст на этой странице.

https://sjp.co.nz/projects/timing-manager/

Вы должны иметь навыки JSON для этого.

Я также использовался анимация.css в сочетании.

Если вы не можете осуществить это, я буду рад разместить весь проект в GitHub

Вот более подробное объяснение

https://github.com/sjp/TimingManager