下面的jquery代码部分,$('.next')的click事件是没问题的,$('.prev')事件里执行到第3次点击就出问了,然后我把里面的animation4换成animation1,animation3换成animation2就是没问题的,CSS3的代码我也贴出来了,我实在看不出这几个animation有什么错,求大神解答!!
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<div class="ss-bar hidden-lg hidden-md"></div>
<div class="bar col-lg-4 visible-lg visible-md">
<ul>
<li><a href="">长城会</a></li>
<li><a href="">会员网络</a></li>
<li><a href="">GMIC</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div class="banner">
<div id="carousel1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/1.jpg">
</div>
<div class="item">
<img src="images/2.jpg">
</div>
<div class="item">
<img src="images/3.jpg">
</div>
</div>
</div>
<div class="s1">
<b>啊啊啊啊啊啊啊啊啊啊啊啊啊啊</b>
</div>
<div class="s1">
<b>呃呃呃呃呃呃呃呃呃额</b>
</div>
<div class="s1">
<b>滴答滴答滴答滴答滴答滴答滴答滴答</b>
</div>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
$('.s1').eq(1).css('display', 'none');
$('.s1').eq(2).css('display', 'none');
$('.s1').eq(0).addClass('animation2');
var nowslide = 0;
var animateflag = true;
var temp1;
$('.next').click(function(event) {
if(animateflag){
animateflag = false;
$('.s1').eq(nowslide).removeClass('animation1');
$('.s1').eq(nowslide).removeClass('animation2');
(nowslide >= 2) ? temp1=0:temp1=(nowslide + 1);
$('.s1').eq(temp1).css('display', 'block');
$('.s1').eq(nowslide).addClass('animation1');
nowslide = nowslide + 1;if(nowslide >= 3) nowslide = 0;
setTimeout(function(){$('#carousel1').carousel('next');},850);
setTimeout(function(){$('.s1').eq(temp1).addClass('animation2').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){animateflag = true;});},1300);
}
});
$('.prev').click(function(event) {
if(animateflag){
animateflag = false;
$('.s1').eq(nowslide).removeClass('animation4');
$('.s1').eq(nowslide).removeClass('animation3');
(nowslide <= 0) ? temp1=2:temp1=(nowslide - 1);
$('.s1').eq(temp1).css('display', 'block');
$('.s1').eq(nowslide).addClass('animation4');
nowslide = nowslide - 1;if(nowslide <= -1) nowslide = 2;
setTimeout(function(){$('#carousel1').carousel('prev');},850);
setTimeout(function(){$('.s1').eq(temp1).addClass('animation3').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){animateflag = true;});},1300);
}
});
.animation1 { animation: animation1 .6s linear forwards; }
.animation2 { animation: animation2 .6s linear forwards; }
.animation3 { animation: animation3 .6s linear forwards; }
.animation4 { animation: animation4 .6s linear forwards; }
@keyframes animation1 { 0% { left: 20%; }
60% { left: 19%; }
100% { left: -40%; } }
@keyframes animation2 { 0% { left: 100%; }
55% { left: 90%; }
100% { left: 20%; } }
@keyframes animation3 { 0% { left: -40%; }
60% { left: -39%; }
100% { left: 20%; } }
@keyframes animation4 { 0% { left: 20%; }
55% { left: 30%; }
100% { left: 100%; } }