-2

jQuery を使用して Web サイト用のイメージ サイクラーを作成しようとしていますが、循環させることができません。画像を循環する 3 つのボタンを追加したいと思います。button1 = 最初の画像、button2 = 2 番目の画像など...そして、ボタンがクリックされていない場合、5秒ごとに自動的に循環するようにするには、どうすればよいですか。解決策を探しましたが、運がありませんでした。助けていただければ幸いです。私のコードは次のとおりです。

$(document).ready(function() {
var current = 1
if(current == 1){
    $('.imgslide1').fadeOut();
    $('.imgslide2').fadeOut();
    $('.imgslide3').fadeOut();
    $('.imgslide1').fadeIn().delay(3000).fadeOut().curr();
};
if(current == 2){
    $('.imgslide1').fadeOut();
    $('.imgslide2').fadeOut();
    $('.imgslide3').fadeOut();
    $('.imgslide2').fadeIn().delay(3000).fadeOut().curr();
};
if(current == 3){
    $('.imgslide1').fadeOut();
    $('.imgslide2').fadeOut();
    $('.imgslide3').fadeOut();
    $('.imgslide3').fadeIn().delay(3000).fadeOut().curr();
};
if(current > 3){
    current = 1;
};
function curr(){
    current++;
};
$('#button1').click(function() {
    current = 1
});
$('#button2').click(function() {
    current = 2
});
$('#button3').click(function() {
    current = 3
});

});

4

3 に答える 3

0

これは Jquery の使用例です。slidejs.com をチェックして、使用できるコードを含むより包括的な例を確認してください。

<script src="js/slides.min.jquery.js"></script>
    <script>
        $(function(){
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });
        });
于 2012-08-09T22:22:04.280 に答える
0

カスタムしたい特別な理由はありますか？多くの jQuery プラグインとライブラリが利用可能です。過去にEasy Sliderを使用しました。これは非常に単純化されており、それほど大きくないため、パフォーマンスへの影響はほとんどありません。

于 2012-08-09T22:30:26.603 に答える
0

他の人がいくつかの提案を投稿しているのを見ました。数多くのプロジェクトで使用してきた素晴らしいプラグインを共有したいと思います。

それはサイクルと呼ばれ、ここで詳細を読むことができます: http://jquery.malsup.com/cycle/

nav (1、2、3)、次、前、カスタム コールバックなどをサポートしています。非常に単純なデモのいくつかをチェックしてください。

(私は多くのサイクルプラグインをテストしましたが、これは私が出会った中で最高のものです)。

于 2012-08-09T22:33:57.967 に答える