0

I created a slider gallery of images float:left and overflow:hidden. every 3 second an image slides left. The slider works but I have an issue: when I get to the last image it goes back to the first image by moving right and shows all the images in this movement.

Is There a way to hide them?

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;

}

Jquery:

$(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

如果您考虑一下，这是有道理的，因为 left 属性被内插回 0，所以slider向后移动。快速解决您的问题的方法是在显示第一张图像时将显式重置为 0，从而在您的anim函数中进行此更改：

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

唯一的问题是幻灯片在重置时不会自然动画，但这需要对您的逻辑进行大量更改。但是，我认为这可以解决您的直接问题。

如果您有兴趣构建更强大的解决方案，请告诉我，我可以帮助您构建简单的概念证明。

于 2013-07-18T21:22:01.387 回答