0

友人のためにデザインしているサイト用に、簡単な小さなスライドショーを作成しています。これまでのところ、画像をクリックしてそれぞれの画像を表示/非表示にすることで、完全に機能するようになりました。画像を自動的にスクロールするようにしようとしていますが、うまくいかないようです。これが私のコードです：

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show();

  $('.slide2').click(function()
  { 
    $('.slide2t').show();
    $('.slide1t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide1').click(function()
  { 
    $('.slide1t').show();
    $('.slide2t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide3').click(function()
  { 
    $('.slide3t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide4t').hide();
  });
  $('.slide4').click(function()
  { 
    $('.slide4t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide3t').hide();
  });
});

</script>

これは、クリックしたときに画像を非表示/表示するために使用しているコードです。これはトグルを使用して短縮できますか?

これは私がそれらを自動的にスクロールさせようとしたものです:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show([1000]),
  $('.slide1t').hide(),
  $('.slide2t').show([1000]),
  $('.slide21t').hide(),
  $('.slide3t').show([1000]),
  $('.slide3t').hide(),
  $('.slide4t').show([1000]),
  $('.slide4t').hide()
});

</script>

この同じコードの他の側面を試して、何かを実行しようとしましたが、アンビルにはなりませんでした。

<div id="slideshow">

        <div class="text"> 
            <a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a>
            <a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a> 
            <a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a> 
            <a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a>
        </div>

        <div class="image">        
            <a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a>
            <a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a>
            <a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a>
            <a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a>
        </div>

    </div>

ドキュメントを調べたところ、使用できること.show([duration],[easing],[callback])がわかりましたが、何を入力すればよいかわかりません。

皆さんありがとう

4

4 に答える 4

1

構造をあまり変更したくないが、クリック機能を保持したい場合は、次のようにすることができます

これは元のアプローチに似ていますが、siblings各画像を個別に行うのではなく、関数と要素に基づいています。これは、新しい要素を簡単に追加し、機能を維持するために最適化されています。setIntervalアニメーション関数もループするために a を使用しました

HTML（若干変更）

<div id="slideshow">
        <div class="text"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="240" height="60" /></a>
     <a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="240" height="60" /></a>  <a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="240" height="60" /></a>  <a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="240" height="60" /></a>

</div>
        <div class="image"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="525" height="210" /></a>
     <a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="525" height="110" /></a>
     <a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="525" height="170" /></a>
     <a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="525" height="190" /></a>

        </div>
    </div>

CSS:

.image a:not(#one) {
    display:none;
}

JavaScript:

$('.text a').click(function () {
    var idName = $(this).attr('id');
    $('.image a').each(function () {
        if ($(this).attr('id') === idName) $(this).show(1000);
        else {
            $(this).hide(1000);
        }
    });
    window.clearInterval(loop);
    loop = self.setInterval(function () {
        autoChangeSlide()
    }, 5000);
});

function autoChangeSlide() {
    var elem;
    $('.image a').each(function () {
        if ($(this).is(':visible')) elem = $(this);
    });
    if (elem.attr('id') != $('.image').children('a').last().attr('id')) {
        elem.hide(1000).next().show(1000);
    } else {
        elem.hide(1000).parent().children('a').first().show(1000);
    }
}
var loop = self.setInterval(function () {
    autoChangeSlide()
}, 5000);

私のソリューションと Dolchio のソリューションを組み合わせて、特に素晴らしいものにすることができます

于 2013-07-13T17:04:29.407 に答える