轮播图

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

    <script src="layui/layui.all.js"></script>

</head>

<body>

<!--轮播图-->

<div>

    <div class="layui-carousel" id="test1" lay-filter="test1">

        <div carousel-item="">

            <div style="background-color: #01AAED">条目1</div>

            <div style="background-color: #0ced62">条目2</div>

            <div style="background-color: #ed1d23">条目3</div>

            <div style="background-color: #ed7e12">条目4</div>

            <div style="background-color: #593bed">条目5</div>

        </div>

    </div>

</div>

</body>

</html>

script代码

<script>

    layui.use('carousel', function() {

        var carousel = layui.carousel；

        //常规轮播

        carousel.render({

            elem: '#test1'

           /* ,full:true*/

          /*  ,width: '100%' //设置容器宽度

            ,height: '100%' //设置容器高度*/

            , arrow: 'always'//始终显示箭头

            ,anim: 'default' //切换动画方式

            ,interval:'1000'//自动切换的时间间隔,不能低于800

            ,indicator:'inside'//指示器位置,如果设定了 anim:'updown'，该参数将无效

           /* ,arrow:'hover'*/

        });

    })

</script>

属性说明

elem 指向容器选择器，如：elem: '#id'。也可以是DOM对象 string/object 无
width 设定轮播容器宽度，支持像素和百分比
height 设定轮播容器高度，支持像素和百分比 
full 是否全屏轮播 boolean false
anim 轮播切换动画方式，可选值为：
　　default（左右切换）
　　updown（上下切换）
　　fade（渐隐渐显切换）
autoplay 是否自动切换 boolean true
interval 自动切换的时间间隔，单位：ms（毫秒），不能低于800 number 3000
index 初始开始的条目索引 number 0
arrow 切换箭头默认显示状态，可选值为：
　　hover（悬停显示）
　　always（始终显示）
　　none（始终不显示）
indicator 指示器位置，可选值为：
　　inside（容器内部）
　　outside（容器外部）
　　none（不显示）

注意：如果设定了 anim:'updown'，该参数将无效 string 'inside'
trigger 指示器的触发事件 string 'click'

layui常用插件(一) 轮播图的更多相关文章

  1. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  2. Bootstrap插件-carousel(轮播图)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 插件-3D轮播图

    先上效果图 查看实例点击 这里  这个栗子中,可以选择展示 5 张 或者展示 3 张,即使是只有一个slide,也可以完成布局,正常轮播,麻麻再也不用怕只有4个slid而不能用这种轮播啦! 本栗实现原 ...

  4. vue项目中，使用vue-awesome-swiper插件实现轮播图

    一.安装 npm install vue-awesome-swiper 二.项目中引入 import 'swiper/dist/css/swiper.css'import {swiper,swiper ...

  5. slider插件制作轮播图

    html代码: <div id="banner_tabs" class="flexslider"> <ul class="slide ...

  6. swiper插件制作轮播图swiper2.x和3.x区别

    swiper3.x仅仅兼容到ie10+.比較适合移动端. swiper3.x官网  http://www.swiper.com.cn/ swiper2.x能够兼容到ie7+.官网是http://swi ...

  7. 6_bootstrap之导航条|轮播图|排版|表单元素|分页

    8.导航条 BootStrap已经提供了完整的导航条实例,通常情况下,我们仅需进行简单修改即可使用. 帮助手册位置:组件-------导航条 9.轮播图 BootStrap已经提供了完整的轮播图实例, ...

  8. swiper轮播图插件

    一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...

  9. 兼容pc端和移动端的轮播图插件 swiper.js

    swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...

随机推荐

  1. oracle创建序列，并插入记录

    Oracle序列创建和使用创建序列 语法 CREATE SEQUENCE 序列名 [相关参数] 参数说明 INCREMENT BY  : 序列变化的步进,负值表示递减.(默认1) START WITH ...

  2. Zookeeper 序列化

    读完这篇文章你将会收获到 在 Zookeeper 源码项目中新建模块,使用 Jute 进行序列化和反序列化 修改 Jute 中的 buffer size 来序列化/反序列化大对象 序言 从 前面的文章 ...

  3. 想做时间管理大师？你可以试试Mybatis Plus代码生成器

    1. 前言 对于写Crud的老司机来说时间非常宝贵,一些样板代码写不但费时费力,而且枯燥无味.经常有小伙伴问我,胖哥你怎么天天那么有时间去搞新东西,透露一下秘诀呗. 好吧,今天就把Mybatis-pl ...

  4. Kubernetes实战总结 - Ingress选型与应用

    一.概述 Ingress 是对集群中服务的外部访问进行管理的 API 对象,可以提供负载均衡.SSL 终结和基于名称的虚拟托管. 典型的访问方式是 HTTP,用于将不同URL的访问请求转发到后端不同的 ...

  5. 飞越面试官（三）--JVM

    大家好!我是本公众号唯一官方指定没头屑的小便--怕屁林.   JVM,全称Java Virtual Machine,作为执行Java程序的容器,几乎代理了Java内存与服务器内存的交互,可以说是程序拥 ...

  6. 别逃避，是时候来给JVM一记重锤了

    今天是猿灯塔“365天原创计划”第2天.   今天讲:   为什么写这个主题呢? 之前看到不少同学在讨论,     今天呢火星哥抽出点时间来帮大家整理一下关于JVM的一些知识点     一.JVM是什 ...

  7. Spring Boot -- Spring AOP原理及简单实现

    一.AOP基本概念 什么是AOP,AOP英语全名就是Aspect oriented programming,字面意思就是面向切面编程.面向切面的编程是对面向对象编程的补充,面向对象的编程核心模块是类, ...

  8. Java实现 第十一届蓝桥杯——走方格（渴望有题目的大佬能给小编提供一下题目，讨论群：99979568）

    走方格 问题描述在平面上有一些二维的点阵. 这些点的编号就像二维数组的编号一样,从上到下依次为第 1 至第 n 行,从左到右依次为第1 至第 m 列,每一个点可以用行号和列号来表示. 现在有个人站在第 ...

  9. HotSpot的类模型（3）

    上一篇 HotSpot的类模型(2) 介绍了类模型的基础类Klass的重要属性及方法,这一篇介绍一下InstanceKlass及InstanceKlass的子类. 2.InstanceKlass类 每 ...

  10. Numerical Sequence（hard version)，两次二分

    题目: 题意: 已知一个序列: 112123123412345123456123456712345678123456789123456789101234567891011... 求这个序列第k个数是多 ...