我正在尝试使用jQuery创建一个简单的滑块。
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'left': 0}, 300);
});
问题是当我点击课程next
的底部时,它只会滑动一次而第二次点击不起作用。
我该如何解决这个问题?
答案 0 :(得分:2)
简单,下一步为$('li').animate({'left': '-=400px'}, 300);
。
$('.next').on('click', function() {
$('li').animate({'left': '-=400px'}, 300);
});
$('.back').on('click', function() {
if(parseInt($('li').css('left')) <= 0){
if(parseInt($('li').css('left')) >= -400){
$('li').animate({'left': "0"}, 300);
} else {
$('li').animate({'left': '+=400px'}, 300);
}
}
});
.slider {
overflow: hidden;
width: 500%;
}
.slider ul {
width: 500%;
}
.slider ul li {
float: left;
list-style: none;
position: relative;
transition: all 0.65s;
}
.next,
.back {
width: 100px;
padding: 5px;
text-align: center;
background-color: skyblue;
float: left;
margin: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<ul>
<li>
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="active">
</li>
<li>
<img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
</li>
<li>
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
</li>
<li>
<img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
</li>
<li>
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</li>
</ul>
</div>
<div class="back">Back</div>
<div class="next">Next</div>
答案 1 :(得分:-2)
您的代码只添加一个左侧:右侧:元素的样式。它不会删除/重置这些值,因此它只会在第一次点击时执行任何操作:
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'left': 0}, 300);
});
您需要做的只是左侧或右侧的动画(使用正值和负值),而不是两者,例如。
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'right': 0}, 300);
});
当然,这不会让事情完全发挥作用(如果你想为每张幻灯片制作动画,你需要增加/减少你移动的数量)但希望它能指出你的意思正确的方向。