我正在创建一个jQuery图像滑块。滑块工作得非常好,但我不希望幻灯片之间有空白区域。我该怎样摆脱它们?
window.onload = function slider() {
$(".slider #1").show("fade", {
direction: 'left'
}, 500);
$(".slider #1").delay(5000).hide("slide", {
direction: 'left'
}, 500);
var sc = $(".slider img").size();
var count = 2;
var margin = $(".slider").width();
setInterval(function() {
$(".slider #" + count).show("slide", {
direction: 'right'
}, 500);
$(".slider #" + count).delay(5000).hide("slide", {
direction: 'left'
}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
}
.img-style {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider {
height: 400px;
overflow: hidden;
}
.slider img {
display: none;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
<div class="row " style="width:100%;margin-left:0px;" id="main">
<div class="slider" id="slide-for">
<img id="1" class="img-style" src="http://lorempixel.com/400/200/abstract/1/" />
<img id="2" class="img-style" src="http://lorempixel.com/400/200/abstract/2/" />
<img id="3" class="img-style" src="http://lorempixel.com/400/200/abstract/3/" />
<img id="4" class="img-style" src="http://lorempixel.com/400/200/abstract/4/" />
<img id="5" class="img-style" src="http://lorempixel.com/400/200/abstract/5/" />
<img id="6" class="img-style" src="http://lorempixel.com/400/200/abstract/6/" />
</div>
</div>
</div>
查看JSFiddle。
答案 0 :(得分:0)
绝对定位可以解决问题。
window.onload = function slider() {
$(".slider #1").show("fade", {
direction: 'left'
}, 500);
var sc = $(".slider img").size();
var count = 1;
var margin = $(".slider").width();
setInterval(function() {
$(".slider #" + count).toggle("slide", {
direction: 'left'
}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
$(".slider #" + count).toggle("slide", {
direction: 'right'
}, 500);
}, 6500);
}
&#13;
.img-style {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider {
height: 400px;
overflow: hidden;
}
.slider img {
display: none;
position: absolute;
top: 0;
left: 0;
}
&#13;
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
<div class="row " style="width:100%;margin-left:0px;" id="main">
<div class="slider" id="slide-for">
<img id="1" class="img-style" src="http://lorempixel.com/400/200/abstract/1/" />
<img id="2" class="img-style" src="http://lorempixel.com/400/200/abstract/2/" />
<img id="3" class="img-style" src="http://lorempixel.com/400/200/abstract/3/" />
<img id="4" class="img-style" src="http://lorempixel.com/400/200/abstract/4/" />
<img id="5" class="img-style" src="http://lorempixel.com/400/200/abstract/5/" />
<img id="6" class="img-style" src="http://lorempixel.com/400/200/abstract/6/" />
</div>
</div>
</div>
&#13;