新手使用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="css/uikit.min.css">
<link rel="stylesheet" type="text/css" href="css/slideshow.css"/>
<link rel="stylesheet" type="text/css" href="css/slidenav.css"/>
<link rel="stylesheet" type="text/css" href="css/dotnav.css"/>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/slideshow.js"></script>
<!--中间内容css-->
<link rel="stylesheet" href="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 style="animation-duration: 700ms;">
<div class="uk-cover-background uk-position-cover bannerImgFir"></div>
<canvas class="bannerCanFir"></canvas>
</li>
<li aria-hidden="true" class style="animation-duration: 700ms;">
<div class="uk-cover-background uk-position-cover bannerImgSec"></div>
<canvas class="bannerCanSec"></canvas>
</li>
<li aria-hidden="true" class style="animation-duration: 700ms;">
<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" style="color: rgba(255,255,255,0.4)"></a>
<a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next" style="color: rgba(255,255,255,0.4)"></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;
}
每次点击播放都会闪烁图片,不知道怎么解决。。。求教大神。
试验后,发现是导入的JQ包更新问题,使用1.8.3的JQ版本就不会出现这个问题。