认识达内从这里开始

最近做了一个网站，首页轮播图一直没有达到理想的效果，在网上找了两个实现方法，一个是用css自己实现，一个是用swiper插件，个人认为swiper做的还比较好用。这里只贴出主要的实现代码，想要看具体实现代码及效果可以到对应网址上看

一、css实现轮播图

实现逻辑：

1)将所有的轮播图片放在一个容器里面，并排排列;

2)编写css动画事件：每隔一定时间向左偏移一定距离，距离为一个轮播图宽度;到最后一个轮播图后切换到第一个图片，实现无限循环

优点：

实现逻辑简单，可以直接拿来用

缺点：

轮播图数量固定，如果要增删，需要修改代码;不是一个顺序的无限循环，到达最后一个轮播图后，会有一个快速倒退的动画，效果不是太好

主要实现代码：

/*//自动播放*/

.slide .slide-auto {

animation: marginLeft 10.5s infinite;

}

@keyframes marginLeft { 0% { margin-left: 0; } 28.5% { margin-left: 0; } 33.3% { margin-left: -600px; } 62% { margin-left: -600px; } 66.7% { margin-left: -1200px; } 95.2% { margin-left: -1200px; } 100% { margin-left: 0; } }

二、swiper插件实现方式

实现方法：

1)下载插件文件：swiper-bundle.min.js和swiper-bundle.min.css，下载文件后解压，在\swiper-master\package目录下有这两个文件;

2)引入插件文件：

!DOCTYPE html

html

head

...

link rel="stylesheet" href="dist/css/swiper-bundle.min.css"

/head

body

...

script src="dist/js/swiper-bundle.min.js" /script

...

/body

/html

3)编写轮播html页面：

div class="swiper-container"

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 class="swiper-scrollbar" /div

/div

4)JS编写代码启动轮播图效果

var mySwiper = new Swiper ('.swiper-container', {

direction: 'vertical', // 垂直切换选项

loop: true, // 循环模式选项

// 如果需要分页器

pagination: {

el: '.swiper-pagination',

},

// 如果需要前进后退按钮

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

},

// 如果需要滚动条

scrollbar: {

el: '.swiper-scrollbar',

},

})

优点：

对轮播图数量没有限制，增删轮播图不需要修改代码;

功能可配置，自由增删轮播功能，api文档地址：#/api/index.html

可以外部控制轮播图，详细可见api文档中的Methods(Swiper方法)

提供import引入方式，可应用在vue和react中。

缺点：

有学习成本，不过不高