滑块并不完美 - 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图像显示在滑块

回答

相关问题