簡單的幻燈片懸停，幻燈片放映停止在mouseleave

這是我的第一篇文章。我的代碼在Chrome和Safari瀏覽器中工作，但幻燈片不會在Firefox中停止。我想展示此代碼的實時版本以使其更容易，但我在本地工作。我想知道是否它是因爲我用鼠標懸停而不是鼠標懸停和鼠標滑過來編寫的，但是我不知道如何正確地將它寫出來。此代碼甚至可能存在錯誤，但瀏覽器未檢測到它。簡單的幻燈片懸停，幻燈片放映停止在mouseleave

HTML：

<div class="fadelinks"> 

    <a href="#"> <img src=""/> </a> 
    <a href="#"> <img src=""/> </a> 
    <a href="#"> <img src=""/> </a> 
    <a href="#"> <img src=""/> </a> 

</div>

的jQuery：

jQuery(document).ready(function($) { 

$(".fadelinks").each(function(){ 
    var $this = this; 
    $($this).hover(function(){ 

     $('> :gt(0)', $this).hide(); 
     timer = setInterval(function(){$('> :first- child',$this).fadeOut() 
     .next().fadeIn().end().appendTo($this);}, 1500); 
     }, function() { 
     clearInterval(timer); 

    }); 

    }); 


});

來源

2014-03-26 ashikitty

一種更簡單的方式來實現是添加的onmouseover = 「mouseoverFunction（）;」的onmouseout = 「mouseoutFunction（）」每個img標籤然後在javascript mouseoverFunction（）

遍歷圖像陣列顯示未來等待

mouseoutFunction（）停止循環

你不需要一個標籤

來源

2014-03-26 02:31:19 ColinHorne

好吧，你想鼠標懸停你的圖片開始滑動這裏是另一個代碼我不是很好的jQuery的，但這裏是代碼：

CSS

#fadelinks{ 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
}

設置你的形象的高度和寬度等於寬度和fadelinks

HTML

<div class="fadelinks"> 

     <a id="same1" href="#"> <img src=""/> </a> 
     <a id="same2" href="#"> <img src=""/> </a> 
     <a id="same3" href="#"> <img src=""/> </a> 
     <a id="same4" href="#"> <img src=""/> </a> 

    </div> 
<button onclick="slid1">image1<button> 
<button onclick="slid2">image2<button> 
<button onclick="slid3">image3<button> 
<button onclick="slid4">image4<button>

jQuery的

var slide1 = function(){ 

    $(document).ready(function(){ 
     $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same1").fadeIn(); 
    }); 
} 
    var slide2 = function(){ 

    $(document).ready(function(){ 
     $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same2").fadeIn(); 
    }); 
} var slide3 = function(){ 

    $(document).ready(function(){ 
     $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same3").fadeIn(); 
    }); 
} var slide4 = function(){ 

    $(document).ready(function(){ 
     $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same4").fadeIn(); 
    });

高度，你就會明白什麼會這做但我如此ld你我在jquery中不太好，所以我在noob風格中做過這件事。但是從這裏你可能會得到這個想法，你可以用事件處理程序mousehover和mouseout來整合它，並且還可以使用setinterval來自動滑動。

謝謝。

來源

2014-03-26 03:24:01 anni

簡單的幻燈片懸停，幻燈片放映停止在mouseleave

回答

相關問題