前端两种实现轮播图方式

<!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（不显示）注意：如果设定了 anim:'updown'，该参数将无效	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能实现的轮播图功能更多，样式更加华丽，示例也更多。