Question

我想在猫头鹰轮播中为每个轮播项目设置动画，就像进度条一样，我正在为动画使用简单的JQuery函数，这被称为onChange事件。但是问题是，在更改HTML结构之前会调用该函数。

点CSS：

--with-ca-path

JS

.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，等到HTML结构更改后再调用此函数？

JSFIDDLE https://jsfiddle.net/nxa36myc/29/（更改幻灯片时，以前的黑色“导航点”会更改为白色）

Answer 1

我在这里https://jsfiddle.net/mazinoukah/m45hx3v2/3/根据您的问题制作了一个小提琴

基本上，我将owl-theme类添加到了owl-carousel容器中。

此外，我删除了“ onChange”选项，并向猫头鹰实例添加了侦听器“ 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');

}

如果您有任何问题或需要进一步的帮助，请与我联系。希望对您有所帮助：）

OwlCarousel2动画点onChange

1 个答案: