【前端】新手使用uikit-幻灯片,但是在播放时图片会闪烁,检查了半天没有研究出来,求解为何?
新手使用uikit-幻灯片,但是在播放时图片会闪烁,检查了半天没有研究出来,求解为何?
以下是源码,index.css在后面贴出,其余导入文件是Uikit的文件和jq源码包。
index.html:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Bodybuilding Website</title><!-- uikit套 --><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><!--中间内容css--><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版本就不会出现这个问题。
更多相关文章
- 智能名片电子名片小程序源码开发,为什么是中大型企业的必选?
- react-redux源码不完全指北
- react源码解读 getNextLanes
- 【PHP】通过PHPoffice实现简单的导入
- 京东秒杀功能HTML源码展示
- ThinkPHP5 excel 导入/导出
- 伪类选择器+盒模型+icon的使用方法+百分比设置元素大小
- 简单表单与css选择器实战案例
- 8.【商城后台管理系统】单点登陆和单一登陆的区别与实现原理案例