UIkit框架之轮播特效

框架引入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="data:images/lunbo1.jpg" width="1280px" height="440px" alt=""></li><li><img class="uk-img-preserve" src="data: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>

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

UIkit官网地址：http://www.getuikit.net/docs/slideshow.html

感谢亲哟?

UIkit框架之轮播特效相关推荐

HTML鼠标悬停图片置顶,jquery实现鼠标悬浮停止轮播特效
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序轮播图①(手动点击轮播) 1 2 3 4 二.CSS样式 * ...
Android 旋转木马轮播,jQuery旋转木马式幻灯片轮播特效
本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件,它适合在PC端与移动端实现旋转木马幻灯片特效.具体内容如下特点响应式--适应任何视窗的宽度混合内容不需要CSS ...
html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效
本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,misl ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
html图片快速轮播特效代码,轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析 A版是一款手机DOTA应用,它涵盖了 ...
css实现的图片列表切换轮播特效html页面前端源码
大家好,今天给大家介绍一款, css实现的图片列表切换轮播特效html页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 特效非常炫酷,可以用于制造音乐播放切换或视频播放切换前端(图2) 图 ...
js之焦点图轮播特效
js之焦点图轮播特效一.原理介绍焦点图在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思,只不过加上了图片.据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字.在很多购物网主页面 ...
HTML5期末大作业：动漫网站设计——福五鼠动漫(6页)带轮播特效高质量代码 HTML+CSS+JavaScript 毕设网页设计HTML
HTML5期末大作业:动漫网站设计--福五鼠动漫(6页)带轮播特效 HTML+CSS+JavaScript 大学生毕设网页设计HTML 学生网页课程设计期末作业下载 web网页设计制作成品常见网页设 ...
HTML5期末大作业：动漫网站设计——斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品
HTML5期末大作业:动漫网站设计--斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页 ...
HTML5期末大作业：网站——个人网站介绍 (7页面带轮播特效)明星赵丽颖学生DW网页设计作业源码 web课程设计网页规划与设计大学生个人网站作业模板...
HTML5期末大作业:网站--个人网站介绍 (7页面带轮播特效)明星赵丽颖临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...

UIkit框架之轮播特效

感谢亲哟?

UIkit框架之轮播特效相关推荐

最新文章

热门文章