【前端】新手使用uikit-幻灯片，但是在播放时图片会闪烁，检查了半天没有研究出来，求解为何？

新手使用uikit-幻灯片，但是在播放时图片会闪烁，检查了半天没有研究出来，求解为何？

以下是源码，index.css在后面贴出，其余导入文件是Uikit的文件和jq源码包。

index.html：

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Bodybuilding Website</title><link rel="stylesheet" type="text/css" href="https://segmentfault.com/q/1010000010156607/css/uikit.min.css"><link rel="stylesheet" type="text/css" href="https://segmentfault.com/q/1010000010156607/css/slideshow.css"/><link rel="stylesheet" type="text/css" href="https://segmentfault.com/q/1010000010156607/css/slidenav.css"/><link rel="stylesheet" type="text/css" href="https://segmentfault.com/q/1010000010156607/css/dotnav.css"/><script src="https://segmentfault.com/q/1010000010156607/js/jquery-3.1.0.min.js"></script><script src="https://segmentfault.com/q/1010000010156607/js/uikit.min.js"></script><script src="https://segmentfault.com/q/1010000010156607/js/slideshow.js"></script><link rel="stylesheet" href="https://segmentfault.com/q/1010000010156607/css/index.css"/></head><body><div class="uk-slidenav-position" data-uk-slideshow="{autoplay: true, animation: 'random-fx'}"><ul class="uk-slideshow"><li aria-hidden="false" class><div class="uk-cover-background uk-position-cover bannerImgFir"></div><canvas class="bannerCanFir"></canvas></li><li aria-hidden="true" class><div class="uk-cover-background uk-position-cover bannerImgSec"></div><canvas class="bannerCanSec"></canvas></li><li aria-hidden="true" class><div class="uk-cover-background uk-position-cover bannerImgThi"></div><canvas class="bannerCanThi"></canvas></li></ul><a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a><a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a><ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center"><li data-uk-slideshow-item="0" class><a href="#">Item 1</a></li><li data-uk-slideshow-item="1" class><a href="#">Item 2</a></li><li data-uk-slideshow-item="2" class><a href="#">Item 3</a></li></ul></div></body></html>

index.css：

/*轮播*/.bannerImgFir{background-image: url("../images/1.png");
}.bannerCanFir{width: 100%; height: auto;opacity: 0;
}.bannerImgSec{background-image: url("../images/2.png");
}.bannerCanSec{width: 100%; height: auto;opacity: 0;
}.bannerImgThi{background-image: url("../images/3.png");
}.bannerCanThi{width: 100%; height: auto;opacity: 0;
}

每次点击播放都会闪烁图片，QQ号码转让地图不知道怎么解决。。。求教大神。

回答

试验后，发现是导入的JQ包更新问题，使用1.8.3的JQ版本就不会出现这个问题。

更多相关文章

随机推荐