如何使用jQuery在圖像滑塊上製作暫停/播放循環按鈕，並使圖像平穩淡入淡出而不會閃爍？

我對JavaScript仍然很陌生，覺得有點難以理解它。如何使用jQuery在圖像滑塊上製作暫停/播放循環按鈕，並使圖像平穩淡入淡出而不會閃爍？

我希望暫停/播放按鈕是一個按鈕，並在點擊時循環播放。

我還想知道如何使圖像過渡更平滑與淡入和淡出？我嘗試改變淡入淡出和淡入淡出的秒數，但它似乎沒有太大的差別，所以我現在有點失落。另外，如何讓圖像在轉換之間停止閃光？

謝謝，Gabi。

HTML：

<body> 
<div class="wrapper"> 
<div id="slider"> 
<img id="1" src="images/kirsty_family01.jpg"> 
<img id="2" src="images/kirsty_family02.jpg"> 
<img id="3" src="images/kirsty_family03.jpg"> 
<img id="4" src="images/kirsty_family04.jpg"> 
<img id="5" src="images/kirsty_family05.jpg"> 
<img id="6" src="images/kirsty_family06.jpg"> 
</div> 
<a href="#" class="left" onClick="prev();return false;">Previous</a> 
<a href="#" class="right" onClick="next();return false;">Next</a> 
<a href="#" class="right" onClick="stop();return false;">Pause</a> 
<a href="#" class="right" onClick="play();return false;">Play</a> 
</div> 
</body>

的jQuery：

sliderInt=1; 
sliderNext=2; 

$(document).ready(function(){ 
$("#slider>img#1").fadeIn(1000); 
startSlider(); 
}); 

function startSlider(){ 
count = $("#slider>img").size(); 

loop = setInterval(function(){ 

    if(sliderNext>count){ 
     sliderNext=1; 
     sliderInt=1; 
     } 

    $("#slider>img").fadeOut(1000); 
    $("#slider>img#"+sliderNext).fadeIn(1000, function() { 
    $(this).siblings().hide(); 
}); 


    sliderInt=sliderNext; 
    sliderNext=sliderNext+1; 

    },3000) 
} 


function prev(){ 
newSlide=sliderInt-1; 
showSlide(newSlide); 
} 

function next(){ 
newSlide=sliderInt+1; 
showSlide(newSlide); 
} 

function stop(){ 
    window.clearInterval(loop); 
} 

function play(){ 
newSlide=sliderInt+1; 
showSlide(newSlide); 
} 

$('#play_toggle').bind("click",function(){ 
if(stop){ 
    play(); 
    $(this).html("pause"); 
    }else{ 
     video.pause(); 
    $(this).html("play"); } 
}); 


function stopLoop(){ 
window.clearInterval(loop); 
} 


function showSlide(id){ 
stopLoop(); 

if(id>count){ 
     id=1; 
     } else if(id<1){ 
      id=count; 
      } 

    $("#slider>img").fadeOut(1000); 
    $("#slider>img#"+id).fadeIn(1000); 

    sliderInt=id; 
    sliderNext=id+1; 
    startSlider(); 
} 

$("#slider > img").hover(
    function() { 
      stopLoop(); 
     }, 
     function() { 
      startSlider(); 
      } 
     );

來源

2013-07-23 Gabi

$('#play_toggle').bind("click",function(){ 
if(stop){ 
    play(); 
    $(this).html("pause"); 
    }else{ 
     video.pause(); 
    $(this).html("play"); } 
});

這些代碼工作正常，更改文本，你需要改變上點擊屬性也

}）;

BTW，我會建議使用一些插件，代替人工幻燈片.. http://bxslider.com/

來源

2013-07-23 04:11:49

嗨羅賓，感謝但沒有奏效回答，我必須改變任何東西在代碼？我嘗試過使用一些插件，但我不滿意他們，所以我寧願製作自己的圖像滑塊，如果可能的話...... – Gabi

將該道具更改爲attr，i。 e，'$（this）.attr（'onclick'，'play（）;'）;' –

如何使用jQuery在圖像滑塊上製作暫停/播放循環按鈕，並使圖像平穩淡入淡出而不會閃爍？

回答

相關問題