0

我对 javascript 还是很陌生，发现它有点难以理解。

我希望暂停/播放按钮是一个按钮，并在单击它时循环播放。

我还想知道如何通过淡入淡出使图像过渡更平滑？我已经尝试更改淡入淡出和淡入淡出中的秒数，但它似乎并没有太大的区别，所以我对现在该做什么有点迷茫。另外，如何使图像在过渡之间停止闪烁？

谢谢，加比。

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();
           }
        );
4

1 回答 1

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

这些代码可以很好地更改文本，您还需要更改 on click 属性，

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

});

顺便说一句，我建议使用一些插件，而不是手动幻灯片放映.. http://bxslider.com/

于 2013-07-23T04:11:49.603 回答