我有这张 Sprite 表 http://codepen.io/benasl/pen/yabpxo我想在它结束后更改为另一个,在第二个结束后第一个需要重新开始,依此类推......我设法通过更改 css 属性来做到这一点,但现在我该怎么做他们循环?
setTimeout(function() {
$(".kambarys2").css('display', 'block');
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
@keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
.kambarys2 {
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
width: 380px;
height: 372px;
top: 108px;
left: 40%;
animation: convejor 3s steps(76) infinite;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys"></div>
<div class="kambarys2"></div>
最佳答案
- 使用数组更改背景图片:
var cnt=0,images=["http://i.imgur.com/TFvZvWz.jpg","http://i.imgur.com/pra08AS.jpg"]
setInterval(function() {
$(".kambarys").css({"background-image":"url("+images[cnt]+")"});
cnt++;
if (cnt>=images.length) cnt=0;
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
@keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys"></div>
- 切换两个div
var cnt=0;
setInterval(function() {
$(".kambarys0").toggle(cnt);
$(".kambarys1").toggle(!cnt); cnt=!cnt
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys0 {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
.kambarys1 {
display:none;
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
position: relative;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
@keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys0"></div>
<div class="kambarys1"></div>
- 循环两个以上的div
var cnt = 0;
setInterval(function() {
cnt++;
if (cnt >= $(".kambarys").length) cnt = 0;
$(".kambarys").hide();
$("#kambarys" + cnt).show();
},
3100);
body {
background-color: #69e4c3;
}
.kambarys {
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
#kambarys0 {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
}
#kambarys1 {
display: none;
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
}
#kambarys2 {
display: none;
background: url('http://i.imgur.com/F6bNA00.jpg');
background-repeat: no-repeat;
}
@keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys" id="kambarys0"></div>
<div class="kambarys" id="kambarys1"></div>
<div class="kambarys" id="kambarys2"></div>
关于javascript - jquery - 更改 css 属性并重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39723917/