jQuery向下滑動滑塊
[英]Jquery slide down slider
問題描述
我正在嘗試創建一個滑塊。 在這里，我們有3個具有3種不同背景色的div。 在下面的代碼中，3 div依次向下滑動，然后向上滑動並永遠運行。 住在這里： http : //jsfiddle.net/kraditya/egs1br26/3/但我只希望3 div的幻燈片永遠一個接一個地下降。 這怎么可能？ 請幫忙。 提前致謝。
<html>
<head>
<title>Slider</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery/jquery.min.js"></script>
<style>
.container{
width: 500px;
height: 250px;
margin: 0 auto;
}
.slider1{
width: 500px;
height: 250px;
margin: 0 auto;
//background-image: url(images/image-1.jpg);
background-color:yellow;
position: absolute;
z-index: 1;
}
.slider2{
width: 500px;
height: 250px;
margin: 0 auto;
//background-image: url(images/image-2.jpg);
background-color:green;
position: absolute;
z-index: 2;
}
.slider3{
width: 500px;
height: 250px;
margin: 0 auto;
//background-image: url(images/image-3.jpg);
background-color:blue;
position: absolute;
z-index: 3;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var runForever = function () {
//$(".slider1").hide();
$(".slider2").hide(); //at start slider2 remains hidden;
$(".slider3").hide(); //at start slider3 remains hidden;
$(".slider2").slideDown(2000, function () {
$(".slider3").slideDown(2000, function () {
$(".slider3").slideUp(2000, function () {
$(".slider2").slideUp(2000, runForever);
});
});
});
};
runForever();
});
</script>
</head>
<body>
<div class="container">
<div class="slider1"></div>
<div class="slider2"></div>
<div class="slider3"></div>
</div>
</body>
</html>
2 個解決方案
解決方案1
2 已采納 2015-06-15 08:37:59
http://jsfiddle.net/egs1br26/5/
$(document).ready(function () {
var runForever = function () {
$(".slider1").hide();
$(".slider2").hide(); //at start slider2 remains hidden;
$(".slider3").hide(); //at start slider3 remains hidden;
$(".slider1").slideDown(2000, function () {
$(".slider2").slideDown(2000, function () {
$(".slider3").slideDown(2000,function(){
runForever();
});
});
});
};
runForever();
});
您還可以像上一張幻燈片一樣添加容器的背景。 這樣看起來就像連續下滑。
.container {
width: 500px;
height: 250px;
margin: 0 auto;
background-color:blue;
}
使用z-index可以實現更實際的解決方案。 通過這種方法，可以去除容器的背景色。
var _img=$("#slideshow div"), zIndex=99;
$(_img).eq(0).show();
function loopIt(){
$(_img).eq(1).css('z-index',zIndex+1).slideDown(1000,function(){
zIndex=zIndex+2;
$(_img).eq(0).hide();
$(_img).eq(2).css('z-index',zIndex).slideDown(1000,function(){
zIndex=zIndex+3;
$(_img).eq(1).hide();
$(_img).eq(0).css('z-index',zIndex).slideDown(1000,function(){
$(_img).eq(2).hide();
loopIt();
});
});
})
}
loopIt();
解決方案2
0 2015-06-15 08:33:21
JQuery滑塊：向下滑動整個頁面
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.