今天研究两种简单实现轮播图功能的方式。
目录
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-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能实现的轮播图功能更多,样式更加华丽,示例也更多。