• 建站系统管家

  • 服务热线: 13487170257
  • 电子邮箱: 413888328@qq.com
基于Layui自定义轮播插件

基于Layui自定义轮播插件


注意:案例提供的是Layui简单使用案例,具体参考Layui官网使用,layui js文件引用的是本地文件,表格数据为ajax加载的本地json数据,本地查看会有跨域问题导致数据不能显示

案例使用方式

1.head js css引用


<link rel="stylesheet" href="layui/css/layui.css" media="all"/>
<link rel="stylesheet" href="css/style.css" media="all"/>

2.底部js引用

<script type="text/javascript" src="js/jquery.min.js">
<script type="text/javascript" src="layui/layui.js">
<script type="text/javascript" src="js/carousel.js">

3.div文件区域

                  
                                                                                                                                                                                                   
         

参数说明:


carousel.render({
    elem: '#carousel01'//指向容器选择器
    ,width: '100%' //设置容器宽度
    ,full:true //开启全屏轮播
    ,arrow: 'always' //始终显示箭头
    ,anim: 'fade' //切换动画方式
    ,autoplay: false //是否自动切换false
    ,arrow: 'hover' //切换箭头默认显示状态||不显示:none||悬停显示:hover||始终显示:always
    ,indicator: 'none' //指示器位置||外部:outside||内部:inside||不显示:none
    ,interval: '5000' //自动切换时间:单位:ms(毫秒)
});


相关标签

使用声明

1. 本站所有素材可用于商业用途,所有素材都为原创
2. 本站下载的原创素材,只拥有使用权,著作权归原速建时代所有。
3. 未经合法授权,不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 系统商业用途请预先授权。
5. 如果素材损害你的权益请联系客服QQ:413888328给予处理。

  • 软件 HTML
  • 格式 zip
  • 作者
  • 栏目 大图轮播
  • 上传时间 2021-11-03