滑塊並不完美 - 2圖像顯示在滑塊

This is my fiddle 滑塊並不完美 - 2圖像顯示在滑塊

<div id="index-1" class="main-wrapper"> 
<div id="bg" class="main"> 
    <img alt="Main BG" src="http://dedicatedguru.com/demo/mhsplanner/wp-content/uploads/wedding-plan.jpg" class="main-bg" style="display: block; width: 100%;"> 
    <img alt="Brand BG" src="http://dedicatedguru.com/demo/mhsplanner/wp-content/uploads/event-plan.jpg" class="brand-bg" style="display: none; width: 100%;"> 
    <img style="display: none; width: 100%;" alt="INspiration" src="http://dedicatedguru.com/demo/mhsplanner/wp-content/uploads/wedding-consultant.jpg" class="inspiration-bg"> 
</div> 
<section id="our-services"> 
    <div class="container"> 
     <div class="row" id="services-col"> 
      <div class="col-xs-12 col-xs-4" id="main-bg"> 
       <a href="/#"> 
        <div class="service2 service-2" data-img="main-bg"> 
         <div class="service-details2" align="center"> 
          <h3>Wedding Planning Services</h3> 
         </div> 
        </div> 
       </a> 
      </div> 
      <!-- /.col-sm-4 --> 
      <div class="col-xs-12 col-xs-4"> 
       <a href="/#"> 
        <div class="service2 service-2" data-img="brand-bg"> 
         <div class="service-details2" align="center"> 
          <h3>Event Planning Services</h3> 
         </div> 
        </div> 
       </a> 
      </div> 
      <!-- /.col-sm-4 --> 
      <div class="col-xs-12 col-xs-4" id="inspiration-bg"> 
       <a href="/#"> 
        <div class="service2 service-2" data-img="inspiration-bg"> 
         <div class="service-details2" align="center"> 
          <h3>Wedding Consultant Services</h3> 
         </div> 
        </div> 
       </a> 
      </div> 
      <!-- /.col-sm-4 --> 
     </div> 
     <!-- /.row --> 
    </div> 
    <!-- /.container --> 
</section> 
<!-- /#our-services -->

$(function(){ 
     $(".service2").hover(function() { 
      clearInterval(timer); 
      $('#bg').children('img').each(function() { 
       $(this).css("display", "none"); 
      }); 
      $('.'+$(this).data("img")).css("display", "block"); 
     }); 
    }); 
    $('#bg').hover(function(ev){ 
     clearInterval(timer); 
    }, function(ev){ 
     timer = setInterval(function() { 
       $('#bg > img:first') 
       .css("display", "none") 
       .next() 
       .css("display", "block") 
       .end() 
       .appendTo('#bg'); 
      }, 3000); 
    })

我已創建由JS一個簡單的滑塊。但是我有一個問題，就像我上面的演示一樣。 - 當我將3個模塊懸停在其中時，滑塊會發生變化。 - 不懸停時，它會自動改變 - >我的問題是當我懸停在第三塊（然後懸停），但「間隔」功能將自動顯示圖像編號2之後。然後我的滑塊破裂（圖片編號2和3將同時顯示）。你能幫我解決這個問題嗎？非常感謝！

來源

2015-08-26 Tienluc

我使用Chrome的Win8和它的作品。如果我將鼠標懸停在花朵上（右側），則下一張幻燈片1（左邊的黃色宴會廳）。 – zer00ne

所以一旦展開，你想從頭開始顯示圖像？ –

好的，我的問題是作爲@Guruprasad Rao演示波紋管解決的。謝謝你們！ – Tienluc

DEMO

2個問題：

首先 - 您還沒有聲明的變量定時器，這是給控制檯錯誤

二 - 你沒有隱藏所有圖像信息再懸停後要到下一輪了

所以下面是你需要做的修改：

var timer; //problem one - A global variable timer 
$(function(){ 
     $(".service2").hover(function() { 
      clearInterval(timer); 
      $('#bg').children('img').each(function() { 
       $(this).css("display", "none"); 
      }); 
      $('.'+$(this).data("img")).css("display", "block"); 
     }); 
}); 
$('#bg').hover(function(ev){ 
    clearInterval(timer); 
    }, function(ev){ 
    timer = setInterval(function() { 
     $("#bg img").css('display','none'); //hide all the images before starting up again 
     $('#bg > img:first').next() 
     .css("display", "block") 
     .end() 
     .appendTo('#bg'); 
    }, 3000); 
})

來源

2015-08-26 04:06:33

隨時...快樂編碼.. –

滑塊並不完美 - 2圖像顯示在滑塊

回答

相關問題