快走
var timer_slideshow = {};
var that, that_boss, has_auto, ele_to_prep;
里面
$('.slideshow-wrapper').each(function(idx, val)
以下内容:
function timer_func_slideshow(ele) {
ele.find('.btn-next-slideshow').trigger("click");
}
$('.slideshow-wrapper').each(function(idx, val) {
var timer_slideshow = {};
var that, that_boss, has_auto, ele_to_prep;
that_boss = $(this);
that = $('.slideshow-container', this); // the same has that_boss.find('.slideshow-container')
has_auto = that.data('auto') != 0;
if (has_auto)
timer_slideshow[idx] = setInterval(function() {
timer_func_slideshow(that_boss);
}, 4000);
that_boss.find('.btn-next-slideshow').on("click", function() {
if (has_auto)
clearInterval(timer_slideshow[idx]);
that.find('.item').eq(0).stop().animate({
'margin-left': '-100%',
}, 500, function() {
$(this).parent().append($(this));
$(this).css({
'margin-left': '0'
});
timer_slideshow[idx] = (has_auto) ? setInterval(function() {
timer_func_slideshow(that_boss);
}, 4000) : undefined;
});
});
that_boss.find('.btn-prev-slideshow').on("click", function() {
if (has_auto)
clearInterval(timer_slideshow[idx]);
ele_to_prep = that.find('.item').last().css({
'margin-left': '-100%'
});
that.prepend(ele_to_prep);
that.find('.item').eq(0).stop().animate({ // este era o ultimo, o que fizemos prepend na linha acima
'margin-left': '0'
}, 500, function() {
timer_slideshow[idx] = (has_auto) ? setInterval(function() {
timer_func_slideshow(that_boss);
}, 4000) : undefined;
});
});
});
.slideshow-container {
margin: 0 auto;
width: 100%;
height: 400px;
overflow: hidden;
white-space: nowrap;
/* VERY IMPORTANT, tirar para perceber */
list-style: none;
font-size: 0;
/* SEM MARGEM ENTRE OS ELEMENTOS FILHOS */
}
.slideshow-container>.item {
display: inline-block;
width: 100%;
height: 100%;
}
.slideshow-container>.item>.imagem {
display: block;
width: 100%;
height: 90%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.slideshow-container>.item>small {
/*position: absolute;*/
/*bottom: 20px;*/
z-index: 99999999999999;
width: 100%;
display: block;
color: #252525;
font-size: 12px;
text-align: center;
}
.slideshow-wrapper {
position: relative;
width: 100%;
}
.slideshow-controls {
position: absolute;
height: 20px;
bottom: 0;
top: 0;
margin: auto auto;
color: #D11C58;
cursor: pointer;
cursor: hand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-wrapper">
<div class="slideshow-container">
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=585');"></div>
<small></small>
</div>
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=586');"></div>
<small></small>
</div>
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://i.stack.imgur.com/5SakC.jpg?s=128&g=1');"></div>
<small></small>
</div>
</div>
<div class="slideshow-controls btn-next-slideshow">âº</div>
<div class="slideshow-controls btn-prev-slideshow">â</div>
</div>
<div class="slideshow-wrapper">
<div class="slideshow-container">
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=585');"></div>
<small></small>
</div>
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=586');"></div>
<small></small>
</div>
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://i.stack.imgur.com/5SakC.jpg?s=128&g=1');"></div>
<small></small>
</div>
</div>
<div class="slideshow-controls btn-next-slideshow">âº</div>
<div class="slideshow-controls btn-prev-slideshow">â</div>
</div>
