layui框架（彈出層和輪播）

一、彈出層
模塊加載名稱：layer；
由於layer可以獨立使用，也可以通過Layui模塊化使用。
layer下載地址：http://layer.layui.com/
1、作爲獨立組件使用 layerlayui

<!--引入好layer.js後，直接用即可-->
<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>

2、在 layui 中使用 layer

<script>
layui.use('layer', function(){
  var layer = layui.layer;
  
  layer.msg('hello');
}); 
</script>

3、彈出層屬性的使用方法
type - 基本層類型
layer提供了5種層類型
可傳入的值有：
0（信息框，默認）
1（頁面層）
2（iframe層）
3（加載層）
4（tips層）
若你採用layer.open({type: 1})方式調用，則type爲必填項（信息框除外）。

基礎參數一覽表：

offset默認情況下不用設置。但如果你不想垂直水平居中，你還可以進行以下賦值：

內置方法一覽表：

代碼展示：

html代碼：

<div>
			<button class="layui-btn" id="btn1">信息框</button>
			<button class="layui-btn" id="btn2">頁面層</button>
			<button class="layui-btn" id="btn3">iframe層</button>
			<button class="layui-btn" id="btn4">加載層</button>
			<button class="layui-btn" id="btn5">tips層</button>
			<button class="layui-btn" id="btn6">輸入層</button>
			<button class="layui-btn" id="btn7">選項卡</button>
		</div>

js代碼：

<script>
			layui.use(["element", "layer"], function() {
				var element = layui.element,
					$ = layui.jquery,
					layer = layui.layer;

				$("#btn1").on("click", function() {
					layer.open({
						type: 0,
						content: "cmascni",
						shade: 0.3
					});
				});

				$("#btn2").on("click", function() {
					layer.open({
						type: 1,
						content: "cmascni",
						shade: 0.3,
						area: ["300px", "200px"],
						btn: ["確認"],
						btnAlign: "c"
					});
				});

				$("#btn3").on("click", function() {
					layer.open({
						type: 2,
						content: "http://baidu.com",
						shade: 0.3,
						area: ["1000px", "500px"],
						btn: ["確認", "關閉"],
						btnAlign: "c",
						anim: 2
					});
				});

				$("#btn4").on("click", function() {
					layer.open({
						type: 3,
						content: "cmascni",
						shade: 0.3,
						time: 1000,
					});
				});

				$("#btn5").on("click", function() {
					layer.tips('Hi，我是一個小提示', this, {
						tips: 1
					});
				});

				$("#btn6").on("click", function() {
					layer.prompt({
							title: "輸入口令",
							formType: 1
						},
						function(pass, index) {
							layer.close(index);
							layer.prompt({
									title: "輸入你想要說的，並確認",
									formType: 2
								},
								function(text, index) {
									layer.close(index);
									layer.msg("口令：" + pass + "<br/>留言：" + text);
								});
						});
				});

				$("#btn7").on("click", function() {
					layer.tab({
						area: ["500px", "400px"],
						tab: [{
							title: "標題一",
							content: "內容1",
						}, {
							title: "標題二",
							content: "內容2",
						}, {
							title: "標題三",
							content: "內容3",
						}],
					});
				});

				layer.photos({
					photos: "#layer-photos-demo",
					anim:3
				});

				//				layer.msg("Hello World！");
			});
		</script>

二、輪播
常規輪播效果圖：

在HTML結構中，只需要簡單地注意這兩項：

1. 外層元素的 class=“layui-carousel” 用來標識爲一個輪播容器
2. 內層元素的屬性 carousel-item 用來標識條目。

通過核心方法：carousel.render(options) 來對輪播設置基礎參數，也可以通過方法：carousel.set(options) 來設定全局基礎參數。

基礎參數選項表:

html代碼：

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>常規輪播</legend>
		</fieldset>

		<div class="layui-carousel" id="test1" lay-filter="test1">
			<div carousel-item="">
				<div style="background-color: #00F7DE;"></div>
				<div style="background-color: #FFFF00"></div>
				<div style="background-color: #FF5722"></div>
				<div style="background-color: #FF00FF"></div>
				<div style="background-color: aqua"></div>
			</div>
		</div>

js代碼：

<script>
			layui.use(["carousel", "form"], function() {
				var carousel = layui.carousel,
					form = layui.form;

				//常規輪播
				carousel.render({
					elem: '#test1',
					arrow: 'always',
					interval: 2000,
					autoplay:true,
					anim: 'fade',
					arrow:"hover",
					width:"80%",
				});	
			});
		</script>