您现在的位置: 首页 > 资讯 > 互联网知识 > 网站制作过程中经常用到广告轮播代码分享给您

网站制作过程中经常用到广告轮播代码分享给您

互联网知识2022-08-09 22:04:30ddcweb181
设定各种参数宽高动画类型左右切换上下切换渐隐渐显箭头状态悬停显示始终显示不显示指示器位置容器内部容器外部不显示自动切换开启关闭always 时间间隔条目1条目2条目3条目
设定各种参数
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>设定各种参数</legend></fieldset>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline"><label class="layui-form-label">宽高</label>
<div class="layui-input-inline" style="width: 98px;"><input autocomplete="off" class="layui-input demoSet" name="width" placeholder="width" type="tel" value="600" /></div>
<div class="layui-input-inline" style="width: 98px;"><input autocomplete="off" class="layui-input demoSet" name="height" placeholder="height" type="tel" value="280" /></div></div></div>
<div class="layui-form-item"><label class="layui-form-label">动画类型</label>
<div class="layui-input-block">
<div class="layui-btn-group demoTest" style="margin-top: 5px;"><button class="layui-btn layui-btn-sm" data-key="anim" data-type="set" data-value="default" style="background-color: #5FB878;">左右切换</button><button class="layui-btn layui-btn-sm" data-key="anim" data-type="set" data-value="updown">上下切换</button><button class="layui-btn layui-btn-sm" data-key="anim" data-type="set" data-value="fade">渐隐渐显</button></div></div></div>
<div class="layui-form-item"><label class="layui-form-label">箭头状态</label>
<div class="layui-input-block">
<div class="layui-btn-group demoTest" style="margin-top: 5px;"><button class="layui-btn layui-btn-sm" data-key="arrow" data-type="set" data-value="hover" style="background-color: #5FB878;">悬停显示</button><button class="layui-btn layui-btn-sm" data-key="arrow" data-type="set" data-value="always">始终显示</button><button class="layui-btn layui-btn-sm" data-key="arrow" data-type="set" data-value="none">不显示</button></div></div></div>
<div class="layui-form-item"><label class="layui-form-label">指示器位置</label>
<div class="layui-input-block">
<div class="layui-btn-group demoTest" style="margin-top: 5px;"><button class="layui-btn layui-btn-sm" data-key="indicator" data-type="set" data-value="inside" style="background-color: #5FB878;">容器内部</button><button class="layui-btn layui-btn-sm" data-key="indicator" data-type="set" data-value="outside">容器外部</button><button class="layui-btn layui-btn-sm" data-key="indicator" data-type="set" data-value="none">不显示</button></div></div></div>
<div class="layui-form-item">
<div class="layui-inline"><label class="layui-form-label">自动切换</label>
<div class="layui-input-block"><!--<input type="checkbox" name="switch" lay-skin="switch" checked lay-text="ON|OFF" lay-filter="autoplay">--><select lay-filter="autoplay"><option value="1">开启</option><option value="0">关闭</option><option value="always">always</option> </select></div></div>
<div class="layui-inline"><label class="layui-form-label" style="width: auto;">时间间隔</label>
<div class="layui-input-inline" style="width: 120px;"><input autocomplete="off" class="layui-input demoSet" name="interval" placeholder="毫秒" type="tel" value="3000" /></div></div></div></div>
<div class="layui-carousel" id="test3" lay-filter="test4">
<div carousel-item="">
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div></div></div>
<script>
layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  
  //常规轮播
  carousel.render({
    elem: '#test1'
  });
  
  //改变下时间间隔、动画类型、高度
  carousel.render({
    elem: '#test2'
    ,interval: 1800
    ,anim: 'fade'
    ,height: '120px'
  });
  
  //设定各种参数
  var ins3 = carousel.render({
    elem: '#test3'
  });
  //图片轮播
  carousel.render({
    elem: '#test10'
    ,width: '720px'
    ,height: '360px'
    ,interval: 3000
  });
  
  //事件
  carousel.on('change(test4)', function(res){
    console.log(res)
  });
  
  var $ = layui.$, active = {
    set: function(othis){
      var THIS = 'layui-bg-normal'
      ,key = othis.data('key')
      ,options = {};
      
      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
      options[key] = othis.data('value');
      ins3.reload(options);
    }
  };
  
  //开关事件
  form.on('switch(autoplay)', function(){
    ins3.reload({
      autoplay: this.checked
    });
  });
  // 自动播放控制
  form.on('select(autoplay)', function (obj) {
    // debugger;
    var autoplayValue = parseInt(obj.value);
    ins3.reload({
      autoplay: isNaN(autoplayValue) ? obj.value : autoplayValue
    });
  })
  
  $('.demoSet').on('keyup', function(){
    var value = this.value
    ,options = {};
    if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    ins3.reload(options);
  });
  
  //其它示例
  $('.demoTest .layui-btn').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>
本文标签:
售前咨询
售后咨询
技术咨询
扫一扫

全国免费服务热线
13712877293

返回顶部