今天研究两种简单实现轮播图功能的方式。
目录
Layui实现轮播图
码云下载
提取静态文件
示例
注意
参数说明
改为轮播图
增加图片资源文件
轮播栏目修改
改为上下切换
切换事件
脚本中绑定改变事件
控制器查看
Swiper实现轮播图
下载swiper
下载到本地
加载swiper
放置静态文件
引入静态文件
添加html内容
设置swiper高宽
初始化Swiper
改为轮播图
Html内容修改
设置分页器点击切换
自动切换
总结
Layui实现轮播图
码云下载
layui
提取静态文件
解压文件后提取dist中的静态资源文件到项目静态资源目录中。
示例
修改官网示例中静态资源路径为本地资源路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layui实现轮播图</title>
<link rel="stylesheet" href="./css/layui.css" media="all">
</head>
<body>
<h1>layui.carousel</h1>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script src="./js/layui.js"></script>
<script>
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
});
</script>
</body>
</html>
注意
1) 外层元素的 class="layui-carousel" 用来标识为一个轮播容器。
2) 内层元素的属性 carousel-item 用来标识条目。
参数说明
| 可选项 | 说明 | 类型 | 默认值 |
| elem | 指向容器选择器，如：elem: '#id'。也可以是DOM对象 | string/object | 无 |
| width | 设定轮播容器宽度，支持像素和百分比 | string | '600px' |
| height | 设定轮播容器高度，支持像素和百分比 | string | '280px' |
| full | 是否全屏轮播 | boolean | false |
| anim | 轮播切换动画方式，可选值为： default（左右切换） updown（上下切换） fade（渐隐渐显切换） | string | 'default' |
| autoplay | 是否自动切换 | boolean | true |
| interval | 自动切换的时间间隔，单位：ms（毫秒），不能低于800 | number | 3000 |
| index | 初始开始的条目索引 | number | 0 |
| arrow | 切换箭头默认显示状态，可选值为： hover（悬停显示） always（始终显示） none（始终不显示） | string | 'hover' |
| indicator | 指示器位置，可选值为： inside（容器内部） outside（容器外部） none（不显示）
| string | 'inside' |
| trigger | 指示器的触发事件（用于切换） | string | 'click'（默认点击） |
效果
改为轮播图
增加图片资源文件
设置轮播显示的图片资源
轮播栏目修改
把原来的栏目div改为img标签加载图片，这样可以图片可以显示全部，如果只是在div内部设置img则显示部分图像。
<div class="layui-carousel" id="test1">
<div carousel-item>
<img src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
<img src="./images/4.jpg" alt="">
<img src="./images/5.jpg" alt="">
</div>
</div>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="./images/1.jpg" alt=""></div>
<div><img src="./images/2.jpg" alt=""></div>
<div><img src="./images/3.jpg" alt=""></div>
<div><img src="./images/4.jpg" alt=""></div>
<div><img src="./images/5.jpg" alt=""></div>
</div>
</div>效果1
效果2
改为上下切换
脚本中anim参数改为’updown’
var carousel = layui.carousel;
// 建造实例
carousel.render({
elem: '#test1'
,width: '60%' //设置容器宽度
,arrow: 'always' //始终显示箭头
,anim: 'updown' //切换动画方式
});效果
切换事件
在layui-carousel容器上增加 lay-filter=”test1”
即：
<div class="layui-carousel" id="test1" lay-filter="test1">
脚本中绑定改变事件
// 触发轮播切换事件
carousel.on('change(test1)', function(obj){
console.log(obj.index); //当前条目的索引
console.log(obj.prevIndex); //上一个条目的索引
console.log(obj.item); //当前条目的元素对象
});控制器查看
这里可以设置切换相应栏目触发相应事件的业务。
Swiper实现轮播图
下载swiper
下载Swiper - Swiper中文网
下载到本地
下载最新的到本地环境
加载swiper
放置静态文件
需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件。
解压后寻找swiper-bundle.min.js和swiper-bundle.min.css文件，放置到项目资源目录下。
引入静态文件
在html页面分别引入swiper js和css文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swiper实现轮播图</title>
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>
<body>
<script src="./js/swiper-bundle.min.js"></script>
</body>
</html>
添加html内容
Swiper7的默认容器是'.swiper'。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
<!-- 导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!--导航等组件可以放在Swiper容器之外-->
设置swiper高宽
在初始化swiper之前需要设置swiper容器高度和宽度，否则无法使用。
<style>
.swiper {
width: 60%;
height: 300px;
}
</style>初始化Swiper
<script>
var mySwiper = new Swiper ('.swiper', {
//direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 分页器
pagination: {
el: '.swiper-pagination',
},
// 前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>这样就可以使用swiper进行正常切换了，接下来如果就可以通过演示来修改参数达到想要的效果了。
改为轮播图
Html内容修改
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../images/1.jpg" alt=""></div>
<div class="swiper-slide"><img src="../images/2.jpg" alt=""></div>
<div class="swiper-slide"><img src="../images/3.jpg" alt=""></div>
<div class="swiper-slide"><img src="../images/4.jpg" alt=""></div>
<div class="swiper-slide"><img src="../images/5.jpg" alt=""></div>
</div>效果
设置分页器点击切换
脚本中分页器设置中增加参数
// 分页器
pagination: {
el: '.swiper-pagination',
clickable: true,
},自动切换
脚本中设置autoplay属性，时间间隔为3000毫秒
autoplay: {
delay: 3000,
disableOnInteraction: false,
},总结
Layui和Swiper都能比较简单的实现轮播图功能，区别在于：swiper能实现的轮播图功能更多，样式更加华丽，示例也更多。
