最新Layui实现轮播图循环播放
首先来看下效果图（珍藏多年的女神照片）
代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../static/css/font.css">
<link rel="stylesheet" href="../../static/css/weadmin.css">
</head>
<body>
<div class="weadmin-body">
<blockquote class="layui-elem-quote">
<h2>轮播图<span class="layui-badge-dot layui-bg-orange"></span></h2>
</blockquote>
<blockquote class="layui-elem-quote">
<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">2</span></button>
</blockquote>
</div>
<div class="layui-carousel" id="test1" lay-filter="test1" style="text-align: center;margin: 0 auto;border: green solid 1px;">
<div carousel-item="">
<div><img src="../../images/1.jpg"></div>
<div><img src="../../images/2.jpg"></div>
<div><img src="../../images/3.jpg"></div>
<div><img src="../../images/4.jpg"></div>
<div><img src="../../images/5.jpg"></div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
<script src="../../static/js/echarts.min.js"></script>
<script src="../../static/js/bmap.min.js"></script>
<script src="../../static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '600px'
,height: '440px'
,interval: 2000 //每2秒，自动轮播
,arrow: 'always'
});
//监听轮播切换事件
carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
console.log(obj.index); //当前条目的索引
console.log(obj.prevIndex); //上一个条目的索引
console.log(obj.item); //当前条目的元素对象
});
});
</script>
</body>
</html>
引入Layui框架的JS和CSS文件，在选取几张自己喜欢的图片，在<img>标签中进行引用，就可以使用了。
希望大家能够喜欢。
1187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
