OwlCarousel2动画点onChange
OwlCarousel2动画点onChange
提问于 2019-05-16 14:53:42
我想在owl-carousel中制作点动画，就像每个旋转木马的进度条一样，我使用简单的JQuery函数来制作动画，这就是所谓的onChange事件。但问题是，该函数是在HTML结构更改之前调用的。
点的CSS：
.owl-theme .owl-dots .owl-dot{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 100px;
height: 5px;
margin-left: 2px;
margin-right: 2px;
background: #ccc;
border:none;
}
.owl-theme .owl-dots .owl-dot span {
margin: 0;
background: white;
width:0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
height: 5px;
}
.owl-theme .owl-dots .owl-dot.active span {
background: white;
width:0px;
}JS
$(carousel).owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
navigation: true,
items: 1,
autoplay:false,
loop:true,
autoplayTimeout:2000,
onChange:navigationFill,
});
function navigationFill() {
var progressbar = $(".owl-theme .owl-dots .owl-dot.active span");
$(progressbar).animate({ width: "100%" }, 'slow');
}此代码仅当轮播在下一个项目上更改时才起作用，但动画是为上一个点制作的。有没有办法，我如何“暂停”这个JS，等待HTML结构改变，然后调用这个函数？
JSFIDDLE https://jsfiddle.net/nxa36myc/29/ (当幻灯片改变时，以前的黑色导航点变成白色)
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-16 16:31:57
我已经根据你的问题在这里创建了一个小提琴https://jsfiddle.net/mazinoukah/m45hx3v2/3/
基本上，我在owl-carousel容器中添加了‘owl- to’类。
此外，我删除了'onChange‘选项，并向owl实例添加了一个侦听器'changed.owl.carousel’。
HTML
<div class="wrapper">
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://shrani.si/f/1W/4U/KrJheJj/tine.jpg"></div>
<div class="item"><img src="http://shrani.si/f/3A/q3/kC00r7/torbice.jpg"></div>
<div class="item padded"><img src="http://shrani.si/f/2o/hl/1xmizZhJ/medvedki.jpg"></div>
<div class="item padded"><img src="http://shrani.si/f/27/wV/4moHQxYk/maladva.jpg"></div>
</div>
<div id="nav"></div>
CSS
body {
background: #fff;
}
.owl-carousel .item {
background: #ccc;
text-align: center;
height: 450px;
}
.wrapper {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.padded {
line-height: 450px;
}
#nav {
position: relative;
}
#nav > div {
font-size: 28px;
position: absolute;
top: -250px;
z-index: 2;
cursor: pointer;
padding: 0 5px;
visibility: hidden;
}
.wrapper:hover #nav > div {
visibility: visible;
}
.owl-prev {
left: 0;
}
.owl-next {
right: 0;
}
.owl-theme .owl-dots .owl-dot{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 100px;
height: 5px;
margin-left: 2px;
margin-right: 2px;
background: #ccc;
border:none;
}
.owl-theme .owl-dots .owl-dot span {
margin: 0;
background: white;
width:0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
height: 5px;
}
.owl-theme .owl-dots .owl-dot.active span {
background: white;
width:0px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}JAVASCRIPT
var owl = $(".owl-carousel").owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
navigation: true,
items: 1,
autoplay:true,
loop:true,
autoplayTimeout:2000,
navText: [
'<i class="fa fa-angle-left"></i>',
'<i class="fa fa-angle-right"></i>'
],
responsive:{
0:{
items:1
},
767:{
items:1,
nav:true
}
}})；
owl.on('changed.owl.carousel', function(event) {
navigationFill();
})
function navigationFill() {
// Reset the width of all the 'dots'
var pr = $(".owl-theme .owl-dots .owl-dot span");
$(pr).css({ width: "0%" });
var progressbar = $(".owl-theme .owl-dots .owl-dot.active span");
$(progressbar).animate({ width: "100%" }, 'slow');
}如果您有任何问题，或者需要进一步的帮助，请告诉我。希望它能有所帮助:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56162467
复制相关文章
相似问题
腾讯云开发者
