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

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

记***6 分类：Html5 人气：1831 回帖：1 发布于6年前收藏

新手使用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;
}

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

标签：uikit css html html5 javascript

讨论这个帖子（1）垃圾回帖将一律封号处理……

Lv6 码匠

tl***an CEO 6年前#1

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

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取