好吧,我被卡住了。
我需要在jQuery的滑块上实现动画。到目前为止,我已经完成了箭头(导航)功能,但无法弄清楚如何在单击“下一个”和“上一个”按钮后添加滑动效果(1、2秒)。
有人知道吗?
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.current');
var nextImg = currentImg.next();
if(nextImg.length == 0) {
nextImg = $('.slider-secondary img').first();
}
currentImg.removeClass('current');
nextImg.addClass('current');
});
$('.previous').on('click', function() {
var currentImg = $('.current');
var prevImg = currentImg.prev();
if(prevImg.length == 0) {
prevImg = $('.slider-secondary img').last();
}
currentImg.removeClass('current');
prevImg.addClass('current');
});
});
<div class="container">
<div class="slider-primary">
<img src="Assets/arrow-blue-left.png" class="previous" alt="Prev">
<div class="slider-secondary">
<img src="Assets/slider-image-1.jpg" class="current">
<img src="Assets/slider-image-2.jpg">
<img src="Assets/slider-image-3.jpg">
<img src="Assets/slider-image-4.jpg">
<img src="Assets/slider-image-5.jpg">
<img src="Assets/slider-image-6.jpg">
<img src="Assets/slider-image-7.jpg">
<img src="Assets/slider-image-8.jpg">
<img src="Assets/slider-image-9.jpg">
</div>
<img src="Assets/arrow-blue-right.png" class="next" alt="Next">
</div>
</div>
非常感谢您的帮助和参考。我很感激。
滑块不能是自动的,它只能在(必须)是图像/图标的箭头(导航)单击上使用。
同样不允许使用任何现有的脚本,插件等。因此我在考虑并考虑了上述所有条件的情况下尝试实现一些其他逻辑。
它实际上是代码测试的一部分。而且必须是在jQuery中,我的流动性显然不佳。
这也是CSS部分
*{
margin: 0;
padding: 0;
}
.container, .slider-primary{
width:100%;
margin:auto;
overflow: hidden;
position: relative;
}
.slider-secondary{
width:100%;
height:600px;
position:relative;
overflow:hidden;
float:left;
}
.slider-secondary img{
display:none;
width:100%;
height:100%;
}
.slider-secondary img.current{
display:inline-block;
}
.previous, .next{
float:left;
cursor: pointer;
position: absolute;
top: 45%;
width: 30px;
height: 40px;
}
.previous{
margin-left:35px;
z-index:100;
}
.next{
margin-left:-65px;
z-index:100;
}
最佳答案
您可以使用jQuery animate()
方法。 Here is the link to the documentation。
但是我建议您使用任何jQuery轻量级库。
你可以去Responsive and Flexible Mobile Touch Slider - Swiper
Demo of the same!