0

この jQuery スライドショー プラグインを使用したロジックに問題があります。一部の画像が引き伸ばされすぎるため、画像の高さを設定する必要はありません。ただし、画像の高さが設定されておらず、画像が短い場合は、その背後にある他の画像を見ることができます。コードは次のようになります。

html

<div id="slideshow1">
    <img src="img/gallery1.jpg" class="active"/>
    <img src="img/gallery2.jpg"/>
    <img src="img/gallery3.jpg"/>
    <img src="img/gallery4.jpg"/>
    <img src="img/gallery6.jpg"/>
    <img src="img/gallery7.jpg"/>
</div>

CSS

#slideshow1{
  position:relative;
  height:450px;
  width:300px;
  float:left;
}
#slideshow1 img{
  position:absolute;
  top:0;
  left:0;
  width:300px;
  //height:450px;
  z-index:8;
  opacity: 0.0;
}
#slideshow1 img.active{
  z-index:10;
  opacity: 1.0;
}
#slideshow1 img.last-active{
  z-index:9;
  opacity: 0.0;
}

js

function slideSwitch() {
var $active = $('#slideshow1 IMG.active');

if ( $active.length == 0 ){ 
    $active = $('#slideshow1 IMG:last');
}

var $next;
if ($active.next().length){
    $next = $active.next();
}else{
    $next = $('#slideshow1 IMG:first');
}

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
  setInterval( "slideSwitch()", 3000 );
});

css の last-active に不透明度を追加しようとしましたが、うまくいきませんでした。コードをあまり混乱させずに背景画像の透明度を切り替えることは可能ですか?

4

3 に答える 3

1

デモ

function slideSwitch() {
    var $active = $('#slideshow1 IMG.active');

    if ($active.length == 0) {
        $active = $('#slideshow1 IMG:last');
    }

    var $next;
    if ($active.next().length) {
        $next = $active.next();
    } else {
        $next = $('#slideshow1 IMG:first');
    }

    $active.addClass('last-active');
    $('#slideshow1 img').css('opacity','0.0'); //added this code

    $next.css({
        opacity: 0.0
    })
        .addClass('active')
        .animate({
        opacity: 1.0
    }, 1000, function () {
        $active.removeClass('active last-active');
    });
}

$(function () {
    setInterval(slideSwitch, 3000);
});
于 2013-08-31T16:43:54.513 に答える
0

適切なトランジションを提供する即興バージョン

function slideSwitch() {

$('img').css('opacity','0');
var $active = $('#slideshow1 IMG.active');
$active.css('opacity','1');

if ( $active.length == 0 ){ 
    $active = $('#slideshow1 IMG:last');
}

var $next;
if ($active.next().length){
    $next = $active.next();
}else{
    $next = $('#slideshow1 IMG:first');
}

$active.addClass('last-active');
$active.animate({opacity: 0.0}, 1000);
$next.css({opacity: 0.0})
    .addClass('active')
    .css('display','block')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });

}

$(function() {
  setInterval( "slideSwitch()", 3000 );
});
于 2013-08-31T17:03:59.817 に答える