Layui之可调参数的动态轮播图---好玩的小玩意儿~-Toy模板网

这篇具有很好参考价值的文章主要介绍了Layui之可调参数的动态轮播图---好玩的小玩意儿~。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

⭐ 本期精彩：利用Layui制作轮播图

效果图：

Layui之可调参数的动态轮播图---好玩的小玩意儿~,layui,前端,javascript

前台代码：

Layui之可调参数的动态轮播图---好玩的小玩意儿~,layui,前端,javascript

JS代码：

Layui之可调参数的动态轮播图---好玩的小玩意儿~,layui,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-576647.html

设置长宽高的事件代码：

//事件
  carousel.on('change(test1)', 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
    });
  });
  //输入框的
 $('.demoSet').on('keyup', function(){
    var value = this.value
    ,options = {};
    if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    ins3.reload(options);
  }); 

});

完整代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@ include file="common/heard.jsp" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>轮播图</title>
</head>
<body>

 
<div class="layui-carousel" id="test1" lay-filter="test1">
  <div carousel-item="">
    <div><img style="width:700px;height: 400px " src="static/images/t1.jpg"></div>
    <div><img style="width:700px;height: 400px " src="static/images/t2.jpg"></div>
    <div><img style="width:700px;height: 400px " src="static/images/t3.jpg"></div>
    <div><img style="width:700px;height: 400px " src="static/images/t4.jpg"></div>
  </div>
</div> 
 
<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 type="tel" name="width" value="600" autocomplete="off" 
        placeholder="width" class="layui-input demoSet">
      </div>
      <div class="layui-input-inline" style="width: 98px;">
        <input type="tel" name="height" value="280" autocomplete="off" 
        placeholder="height" class="layui-input demoSet">
      </div>
    </div>
  </div>
  
  
 <script>
layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  

  //设定各种参数
 var ins3 = carousel.render({
    elem: '#test1'
  }); 
  //图片轮播
  carousel.render({
    elem: '#test1'
    ,width: '700px'
    ,height: '400px'
    ,interval: 1111
  });
  
  
  //事件
  carousel.on('change(test1)', 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
    });
  });
  //输入框的
 $('.demoSet').on('keyup', function(){
    var value = this.value
    ,options = {};
    if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    ins3.reload(options);
  }); 

});
</script>
</body>
</html>

到了这里，关于Layui之可调参数的动态轮播图---好玩的小玩意儿~的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！