Question

我想自动滑动包含内容的div，下面是我到目前为止使用的代码。

HTML：

<div id="gallery">
  <div id="slider" style="width: 6000px; left: -500px;">
     <div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
        <div class="testimonial-icon"></div>

        <div class="testimonial-post">Content here.</div>

        <div class="testimonial-author">

            <span>Sub content</span>
        </div>

        </aside></div>
     <div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
        <div class="testimonial-icon"></div>

        <div class="testimonial-post">Content here.</div>

        <div class="testimonial-author">

            <span>Sub content</span>
        </div>

        </aside></div>
     <div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
        <div class="testimonial-icon"></div>

        <div class="testimonial-post">Content here.</div>

        <div class="testimonial-author">

            <span>Sub content</span>
        </div>

        </aside></div>
  </div>
  <span id="prev"></span>
  <span id="next"></span>
</div>

CSS：

#gallery{
  position:relative;
  margin: 0 auto;
  overflow:hidden;
  width:500px;
  height:278px;
}
#slider{
  position:absolute;
  left:0;
  height:278px;
}
#slider > div {
  position:relative;
  float:left;
  width:500px;
  height:278px;
}
#slider > div img{
  width:100%;
}
/* buttons */
#gallery > span{
  cursor:pointer;
  position:absolute;
  width:50px;
  height:100%;
  background:rgba(255,255,255,0.5);
  opacity:0.5;
}
#next{
  right:0px;
}
#gallery > span:hover{
  opacity:1;
}

剧本：

var $gal = $('#gallery'),
    $sli = $('#slider'),
    $box = $('div',$sli),
    W    = $gal.width(), // 500
    N    = $box.length,  // 3
    C    = 0,            // a counter
    intv;

$sli.width(W*N);


$('#prev, #next').click(function(){
  C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
  $sli.stop().animate({left: -C*W },800);  
}); 

function auto(){
  intv = setInterval(function(){
    $('#next').click();
  }, 3000);
}
auto(); // start

$('#gallery').hover(function( e ){
  return e.type=='mouseenter'?clearInterval(intv):auto();
});

jsFiddle演示链接：

Fiddle link

问题：

当我的内容开始滑动时，在2张幻灯片后，它会消失并且不会再回来。当我使用图像而不是内容时，事情很好，下面是相同的代码和小提琴链接。

HTML：

<div id="gallery">
  <div id="slider">
     <div><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt=""></div>
     <div><img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt=""></div>
     <div><img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt=""></div>
  </div>
  <span id="prev"></span>
  <span id="next"></span>
</div>

CSS和脚本与上面相同。

小提琴链接：

Fiddle link with Image

我想使内容的div与图像的工作方式类似。

Answer 1

原因是代码中的$box.length没有给出12而不是3。请查看更正的代码并检查它是否能解决您的问题。

我已向box添加了一个班级div，以便它返回3.当您尝试从父div中选择slider时，它会计算所有在父级中div并返回导致此问题的12。

JSFIDDLE

Answer 2

原因是代码中的$box.length没有给出12而不是3。请查看更正的代码并检查它是否能解决您的问题。

我已向box添加了一个班级div，以便它返回3.当您尝试从父div中选择slider时，它会计算所有在父级中div并返回导致此问题的12。

JSFIDDLE

在为内容创建div的自动滚动时遇到问题

2 个答案: