用layui实现一个不错的幻灯轮播图

QQ截图20220719124319.png

首页代码栏目加加上layui的 js和css
如下:
  1. <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
  2.     <script type="text/javascript" src="js/jquery.js"></script>
  3.     <script src="layui/layui.js"></script>
复制代码
模板代码部分:
  1.     <div class="layui-carousel" id="banner">
  2.                             <div carousel-item="">
  3. <li><a href="/"><img src="图片地址" alt="" title="">
  4.                             </div>
  5.                         </div>
复制代码
script代码
  1. <script>
  2.         layui.use(['carousel'], function () {
  3.             var carousel = layui.carousel;
  4.             carousel.render({
  5.                 elem: '#banner', width: '100%', height: '350px', interval: 5000
  6.             
  7.             });
  8.         })
  9.     </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'





上一篇:腾讯云轻量服务器ftp无法连接方法
下一篇:宝塔面板使用`Navicat`或其他工具连接数据库
如无回复请发邮件