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，您无法在div代码中移动单个li。

该插件设计为每个li代码有一张幻灯片，而不是每个div代码的多张幻灯片（li＆s;）。每个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技能。

我还组合使用了animation.css。

如果你无法实现它，我很乐意在GitHub中发布整个项目

以下是更详细的解释

https://github.com/sjp/TimingManager

JQUERY ::自动幻灯片

2 个答案: