UIkit框架之轮播特效

最新推荐文章于 2024-08-20 17:50:19 发布

爱捡垃圾的兔子

最新推荐文章于 2024-08-20 17:50:19 发布

阅读量992

点赞数 2

分类专栏： Web前端文章标签： uikit

本文链接：https://blog.csdn.net/qq_36746096/article/details/84243758

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

框架引入CSS和JS：

<!--引入css和js的路径请根据自己的实际情况确定 -->

<!-- css -->
<link rel="stylesheet" type="text/css" href="uikit/css/uikit.css">
<link rel="stylesheet" type="text/css" href="uikit/css/components/slideshow.css"><!-- 轮播需引入的css-->
<link rel="stylesheet" type="text/css" href="uikit/css/components/slidenav.css"><!--滑块导航引入 -->
<link rel="stylesheet" type="text/css" href="uikit/css/components/dotnav.css"><!--圆点导航引入 -->


<!-- js -->
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="uikit/js/uikit.js"></script>
<script type="text/javascript" src="uikit/js/components/slideshow.js"></script><!-- 轮播需引入的js-->
<!-- ps:jquery-1.12.4最好在框架必须引入的uikit.js上面-->

具体实现代码：

<div class="uk-width-medium-1-1 broadcast">
    <div class="uk-slidenav-position" data-uk-slideshow>
	<ul class="uk-slideshow" data-uk-slideshow="{kenburns:true,autoplay:true}"><!--autoplay:true 可以自动视差轮播的图片 -->
	    <!-- 此处图片设置-->
            <li><img class="uk-img-preserve" src="images/lunbo1.jpg" width="1280px" height="440px" alt="">
            </li>
	    <li><img class="uk-img-preserve" src="images/lunbo2.jpg" width="1280px" height="440px" alt="">
            </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="uk-active"><a href="#"></a></li>
	    <li data-uk-slideshow-item="1"><a href="#"></a></li>
	</ul>

    </div>
</div>

运行效果：（图片就自己找吧?）