0

私はレスポンシブ Web デザインを扱っていて、いくつかの画像をページにスライドさせたいと考えていました。いくつかのプラグインを試しましたが、プラグインの問題は、幅と高さのプロパティを使用し、position: absolute. そこで、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

1 に答える 1

1

これが私がまとめたものです。jsフィドル

JavaScript

var img = $(".image-holder img")
var i = 0;
var count = img.length - 1;

setInterval(function() {
    showImage(i);
    i++;
    if (i > count) i = 0;
}, 2000);

function showImage(i) {
    img.eq(i - 1).animate({
        "opacity": "0"
    }, 1000);
    img.eq(i).animate({
        "opacity": "1"
    }, 1000);
}​

HTML

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


</div>
<div  class="image-holder" >
<img src="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png"  />
</div>​

CSS

.image-holder img{ opacity: 0;}
.image-holder { position: absolute; }
于 2012-10-25T13:17:00.300 に答える