如何解决jQuery Div滑块循环
我有一个小问题。 div滑动并到达终点，它会迅速显示div 1而不会暂停。第5分部看不到。
Widget systems(String systemName,String systemTitle,Image img) {
return Center(child:
Container( width:width-20,height:110,child:
Column( children: <Widget>[
SizedBox(height: 10),RaisedButton( elevation: 10,splashColor: Colors.transparent,highlightElevation: 0,shape:
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),),color: Colors.white,onPressed: () {},child: Padding(
padding: EdgeInsets.only(left:0,top:15,bottom:15),child: Row(children: [
img,Container(width:width-120,child:
Align(
alignment: Alignment.center,child: Column(
children: [
Text(systemName,style: TextStyle(fontSize: 18)),],)
])))
])));
}
但是如果我添加延迟
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
setInterval(function(){
$slides.animate({'margin-left': '-='+width},speed,function(){
current++;
if(current == $slide.length){
$slides.css('margin-left',0);
current = 1;
}
});
},pause);
});
if(current == $slide.length){
$(this).delay(pause).queue(function(){
$slides.css('margin-left',0);
});
current = 1;
}
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
setInterval(function(){
$slides.animate({'margin-left': '-='+width},function(){
current++;
if(current == $slide.length){
$(this).delay(pause).queue(function(){
$slides.css('margin-left',0);
});
current = 1;
}
});
},pause);
});.slider {
width: 100%;
height:auto;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 1px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: #bbb;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100vw;
height: 100vh;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0,0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
margin: 0 0 0.5rem 0;
position: relative;
border:1px solid green;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #666;
}
/* Don't need button navigation */
@supports (scroll-snap-type) {
.slider > a {
display: none;
}
}它显示了需要的Div 5，但是显示div 1之后，它不再滑动了。
那我该怎么做才能保持循环并在给定的时间显示每个div？
也许有人可以展示如何使滑块达到最后一个div后向后滑动并滑回一个div？
解决方法
第一：针对您问题的BAD解决方案：（转到第二）
一旦current == $slide.length，您的动画代码就会卡在队列中，您应该将下一个函数作为参数传递给队列回调，然后使用next()来触发其他函数。如下：
if(current == $slide.length){
$(this).delay(pause).queue(function(next){ //<--- here next argument
$slides.css('margin-left',0);
next(); // <----- next call
});
current = 1;
}
但这不会使动画效果按预期进行
第二：适当的简单解决方案
我的建议是，将动画的left值设置为变量，然后检查它是否为最后一个，因此将其滑动到0，否则继续向左滑动视图宽度
查看有效代码段：
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var leftAnnime = '-='+width;
setInterval(function(){
$slides.animate({'margin-left': leftAnnime },speed,function(){
current++;
if( current == $slide.length ) {
leftAnnime = 0;
current = 0;
} else {
leftAnnime = '-='+width;
}
});
},pause);
});.slider {
width: 100%;
height:auto;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 1px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: #bbb;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100vw;
height: 100vh;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0,0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
margin: 0 0 0.5rem 0;
position: relative;
border:1px solid green;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #666;
}
/* Don't need button navigation */
@supports (scroll-snap-type) {
.slider > a {
display: none;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slides">
<div id="slide-1" class="slide">Slide 1</div>
<div id="slide-2" class="slide">Slide 2</div>
<div id="slide-3" class="slide">Slide 3</div>
<div id="slide-4" class="slide">Slide 4</div>
<div id="slide-5" class="slide">Slide 5</div>
</div>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
