1

私はレスポンシブ Web デザインを扱っていて、ページ内でいくつかの画像をスライドさせたいと考えていました。いくつかのプラグインを試しましたが、プラグインの問題は、幅と高さのプロパティを使用し、絶対位置を割り当てるものもあります。そこでjsを使って画像のsrcを自分で変更しようと思ったのですが、うまくいきましたが、トランジション効果を付けることはできますか？

私がやったことは次のとおりです。

var i =0;
var total =2;
window.setInterval(function(){
  show_hide();
}, 1000);

function show_hide()
{
        var img=$('.image-holder img, .image-holder2 img');
        //alert(img.length);
        if(i%2==0)
        {

             img[0].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
             img[1].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';

            i=0;
        }
        else
        {

             img[0].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
             img[1].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
        }

       i++;




}

私のhtml

<div  class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834"  />


</div>
<div  class="image-holder2" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834"  />
</div>
4

2 に答える 2

1

タイトルに答えて、srcを変更しながらfadeIn/fadeOutを与えるのは簡単です。要素をfadeOutさせ、srcを変更して、再びフェードインさせます。また、jQuery では、そのようなクラスを反復処理すると、独自のセレクターを使用する目的が台無しになることを指摘したいと思います " .each()"

$('.image-holder img, .image-holder2 img').each(function() {
            $(this).fadeOut(200,function() {
                $(this).attr('src', 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png');
                $(this).fadeIn(200);
            });
        });

http://jsfiddle.net/tq9nV/1/

于 2012-10-25T13:22:06.487 に答える
0

で jQuery を使用しanimate()ます。show(N ms)イメージの一方と他方で実行することもできますhide(N ms)。効果 (フェードインやフェードアウトなど) を使用して画像を表示/非表示にする方法を選択することもできます。

また、 http://api.jquery.com/fadeIn/およびhttp://api.jquery.com/fadeOut/もご覧ください。

于 2012-10-25T12:59:36.163 に答える