0

float:left と overflow:hidden の画像のスライダー ギャラリーを作成しました。3 秒ごとに画像が左にスライドします。スライダーは機能しますが、問題があります。最後の画像に到達すると、右に移動して最初の画像に戻り、この動きのすべての画像が表示されます。

それらを非表示にする方法はありますか？

HTML:

    <div id="gal">
        <div id="gal-overflow">
            <div id="slider">
                <img id="first-image" src="images/kinder.jpg">
                <img src="images/evadesign-accessori.jpg">
                <img src="images/evadesign-accessori.jpg">
                <img id="last-image" src="images/lora-swisera.jpg">
            </div>
        </div>

        <div id="prev"><</div>
        <div id="next">></div>

        <div id="gal-nav"></div>

    </div>

CSS:

#gal{   
position:relative;
width:700px;
height:400px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;
border:2px solid #fff;
}

#gal-overflow{  
position:relative;
overflow:hidden;
width:700px;
height:400px;
}

#slider{
position:absolute;
left:0;
}

#slider img{
float:left;
}

#prev, #next{
cursor:pointer;
width:50px;
line-height:50px;
background:grey;
position:absolute;
opacity:0.5;
position:absolute;
top:170px;
text-align:center;
display: inline-block;
vertical-align: middle;
color:#000;
font-size:40px;
-webkit-border-radius:25px;
        border-radius:25px;

}

#prev:hover, #next:hover{
opacity:0.8;
}

#prev{
left:0px;
}

#next{
right:0px;
}

#gal-nav{
position:absolute;
bottom:10px;
width:700px;
height:25px;
text-align:center;
}

#gal-nav span{
font-size:20px;
cursor:pointer;
color:#49c;
opacity:0.6;
background:grey;
margin:0 3px;
display:inline-block;
width:25px;
height:25px;
text-align:center;
-webkit-border-radius:40px;
        border-radius:40px;
}

#gal-nav span:hover{
opacity:0.8;
}

#gal-nav span.active{
opacity:0.8;
background:#49c;
color:#fff;


}

body{
background-color:#000;

}

Jクエリ:

$(document).ready(function(){

var galW = $('#gal').width(), //700
 imgN = $('#slider img').length, //3
 count = 0,
 galInterval;

 for (i=0; i<imgN ;i++){

    $('<span />').appendTo('#gal-nav');
 }

 function anim (){

    $('#slider').stop().animate({left:-count*galW},800);
    $('#gal-nav span').removeClass('active').eq( count ).addClass('active');

 }
 anim();

function auto(){
    galInterval= setInterval(function(){

        $('#next').click();
    },3000);

}
auto();

$('#slider').width(galW*imgN);  
$('#prev, #next').click(function(){     

var myId = this.id=='next' ? count++ : count--;
        count = count== -1 ? imgN-1 : count%imgN;
        anim();
    }); 
    $('#gal-nav span').click(function(){    
        count = $(this).index();
        anim();
    }); 
    $('#gal').on('mouseenter mouseleave', function (e){

        if (e.type=='mouseenter'){
            clearInterval(galInterval);
        }else{
            auto();
        };          
    });     
});
4

1 に答える 1

0

slider考えてみれば、左のプロパティが 0 に補間され、が後方に移動するため、これは理にかなっています。問題の簡単な修正は、最初の画像を表示するときに明示的なリセットを 0 に追加して、anim関数で次の変更を行うことです。

if (count) {
    $('#slider').stop().animate({left:-count*galW},800);
} else {
    $('#slider').stop().css('left', 0);
}

唯一の問題は、リセット時にスライドが自然にアニメーション化されないことですが、そのためにはロジックを大幅に変更する必要があります。ただし、これで当面の問題は解決すると思います。

より堅牢なソリューションの構築に興味があるかどうか教えてください。簡単な概念実証の構築をお手伝いできます。

于 2013-07-18T21:22:01.387 に答える