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>


<div id="galleryTwo">
  <div id="sliderTwo" 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="prevTwo"></span>
  <span id="nextTwo"></span>
</div>

CSS：

/* Scolling review starts */
#gallery{
  position:relative;
  margin: 0 auto;
  overflow:hidden;
  width:960px;
  height:178px;
}
#slider{
  position:absolute;
  left:0;
  height:278px;
}
#slider > div {
  position:relative;
  float:left;
  width:960px;
  height:178px;
}
#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;
}
/* Scolling review ends */

/* Scolling review Two starts */
#galleryTwo{
  position:relative;
  margin: 0 auto;
  overflow:hidden;
  width:960px;
  height:218px;
}
#sliderTwo{
  position:absolute;
  left:0;
  height:278px;
}
#sliderTwo > div {
  position:relative;
  float:left;
  width:960px;
  height:178px;
}
#sliderTwo > div img{
  width:100%;
}
/* buttons */
#galleryTwo > span{
  cursor:pointer;
  position:absolute;
  width:50px;
  height:100%;
  background:rgba(255,255,255,0.5);
  opacity:0.5;
}
#nextTwo{
  right:0px;
}
#galleryTwo > span:hover{
  opacity:1;
}
/* Scolling review Two ends */

剧本：

var $gal = $('#gallery'),
    $sli = $('#slider'),
    $box = $('#slider > div'),
    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();
});

////////////////////////////////////////////////////////////

var $galTwo = $('#galleryTwo'),
    $sliTwo = $('#sliderTwo'),
    $boxTwo = $('#sliderTwo > div'),
    WTwo    = $galTwo.width(), // 500
    NTwo    = $boxTwo.length,  // 3
    CTwo    = 0,            // a counter
    intv;

$sliTwo.width(WTwo*NTwo);


$('#prevTwo, #nextTwo').click(function(){
  CTwo = (this.id=='nextTwo' ? ++CTwo : --CTwo) <0 ? NTwo-1 : CTwo%NTwo;
  $sliTwo.stop().animate({left: -CTwo*WTwo },800);  
}); 

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

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

小提琴链接：

Fiddle link

问题：

我正在使用两个div #gallery和#galleryTwo创建一个自动滑动div。我在两者中都需要相同的功能，所以我重命名了它们并在不同的地方使用它们。它工作正常，但在小提琴（以及我的工作流程）上，当你将鼠标悬停在自动滑动div上时，重复的div的自动滑动，即#galleryTwo停止，最初自动滑动。我对代码的这一部分感到困惑，需要让它们自动滑动，甚至是否悬停。

Answer 1

变量intv是全局的，它指向为第二个滑块设置的间隔。每当您悬停任一滑块时，如下面的代码所示

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

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

您正在清除intv因此第二个滑块将停止。如果要单独控制它们，则需要指向每个滑块间隔的不同变量。

如果您不想在悬停时控制滑块，可以删除这些悬停监听器：）

面临重复两个自动滑动div的问题

1 个答案: