0

私はまだJavaScriptに非常に慣れていないので、理解するのが少し難しいと感じています。

一時停止/再生ボタンを 1 つのボタンにして、クリックすると循環するようにしたいと思います。

また、フェードインとフェードアウトで画像の遷移をよりスムーズにする方法についても考えていました。フェードインとフェードアウトの秒数を変更してみましたが、あまり違いがないように見えるので、今何をすべきか少し迷っています。また、トランジションの間に画像がフラッシュを停止するようにするにはどうすればよいですか?

ありがとう、ガビ。

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"); }
});

これらのコードは、テキストを変更するために正常に機能します。クリック時の属性も変更する必要があります。

$('#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 に答える