两种轮播图实现方式

  • A+
所属分类:Web前端
摘要

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

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

一、css实现轮播图

原文网址:https://www.jianshu.com/p/550c11f3b731

实现逻辑:

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插件实现方式

文档网址:https://www.swiper.com.cn/usage/index.html

实现方法:

1)下载插件文件:swiper-bundle.min.js和swiper-bundle.min.css,下载地址:https://www.swiper.com.cn/download/index.html#file1,下载文件后解压,在swiper-masterpackage目录下有这两个文件;

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文档地址:https://www.swiper.com.cn/api/index.html

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

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

缺点:

有学习成本,不过不高