layui轮播 | 易学教程

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>
切记轮播不能放入form表单中
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="js/layui/v2.3.0/src/css/layui.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>
  html, body {
    height: 100%;
  }
</style>
<body>
<div class="layui-carousel" id="test1">
  <div carousel-item style="text-align: center;">
    <!--<div><img src="images/1.jpg" height="100%"></div>-->
    <!--<div><img src="images/2.jpg" height="100%"></div>-->
    <!--<div><img src="images/3.jpg" height="100%"></div>-->
  </div>
</div>

<div class="layui-btn layui-btn-warm" onclick="layui.event.loadImg()" style="margin: 20px">模拟异步的加载图片重新然后重载carousel</div>

<script src="js/layui/v2.3.0/src/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
  layui.use(['carousel','layer'], function () {
    var $ = layui.jquery;
    var carousel = layui.carousel;
    layui.event = {
      loadImg: function () {
        $('#test1').find('>div[carousel-item]').html(['<div><img src="images/1.jpg" height="100%"></div>',
          '<div><img src="images/2.jpg" height="100%"></div>',
          '<div><img src="images/3.jpg" height="100%"></div>'].join());
        ins.reload();
      }
    };
    //建造实例
    var ins = carousel.render({
      elem: '#test1'
      , width: '100%' //设置容器宽度
      , height: '30%'
      , arrow: 'always' //始终显示箭头
      , autoplay: true
      , interval: 1000
      //,anim: 'updown' //切换动画方式
      , beforeSlide: function (elem, index) {
        // console.log(elem, index);
        //
        // console.log(elem.get(index)); // 当前的轮播页面的dom
        // if (Math.random() > 0.5) {
        //   layer.msg('不能切换', {
        //     anim: 6
        //   });
        //   return false;
        // }
      }
    });

    // 移出鼠标移入就暂停切换的功能
    // $('#test1').unbind('mouseenter').unbind('mouseleave');
  });
</script>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/u/4174369/blog/3154034
标签
layui