在html中使用swiper插件实现轮播图效果

最近在对公司官网改版2.0，之前的没有后台都是静态页面
那么官网逃不开的肯定是轮播图啦~
当然我一开始是自己写的，发现写到一半很麻烦，首先从最后一张像环路一样到第一张；其次不仅是点击，还要触摸滑动，这就要计算松开手的位置来判断是上一张、下一张还是原来的一张轮播图；最后过渡效果也生硬。索性就放弃了，直接使用插件了
附上链接，swiper的api可以看看，里面有一些配置可以设置一下
https://www.swiper.com.cn/api/index.html

我是后台请求得到的图片然后实现轮播
如果是写死的图片

1，html部分

<!-- 轮播图 --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item,index) in bannerList" :key="index"><img :src="item" alt=""></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>

2，css部分

    .container .swiper-container {width: 100%;height: 720px;position: relative;}.container .swiper-container img {width: 100%;height: 100%;}.container .swiper-container .swiper-pagination-custom {bottom: 32px;left: 0;width: 100%;height: 20px;/* background-color: red; */text-align: center;}/*自定义分页器的样式，这个你自己想要什么样子自己写*/.container .swiper-container .swiper-pagination-customs {width: 48px;height: 3px;display: inline-block;background: rgba(255, 255, 255, 0.6);border-radius: 10px;/* box-shadow: 0 0 2px #000; */margin: 0 12px;outline: 0;}/*自定义分页器激活时的样式表现*/.container .swiper-container .swiper-pagination-customs-active {background-color: rgba(255, 255, 255, 1);}.container .swiper-container .swiper-button-next {width: 71px;height: 71px;background-image: url("../images/index_banner_arrow_right.png");background-repeat: no-repeat;background-size: cover;}.container .swiper-container .swiper-button-prev {width: 71px;height: 71px;background-image: url("../images/index_banner_arrow_left.png");background-repeat: no-repeat;background-size: cover;}

3，js部分

要下载一下swiper.css和swiper.js和vue.js并引入（我这里用了vue，所以还要在最外层的标签给一个id选择器app)

<script type="text/javascript">var app = new Vue({el: '#app',data() {return {bannerList: [], //轮播图的图片地址}},})</script><script>
var mySwiper = new Swiper('.swiper-container-pc', {autoplay: {delay: 5000,//轮播的定时disableOnInteraction: false,},loop: true, // 循环模式选项speed: 1000, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',type: 'custom',//设置自定义分页器样式autoplayDisableOnInteraction: false,renderCustom: function (swiper, current,total) {var paginationHtml = " ";for (var i = 0; i < total; i++) {// 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类if (i === (current - 1)) {paginationHtml +='<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';} else {paginationHtml +='<span class="swiper-pagination-customs"></span>';}}return paginationHtml;},},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},})</script>

如果没有后台交互就已经能实现了
下面是怎么交互实现轮播的，html和css一样，没改动
js部分，在vue部分写交互逻辑并调用

到这里，你会发现图片成功渲染了，但是轮播图不实现轮播了

methods: {//获取轮播图getBannerList() {$.ajax({type: 'GET',url: 'http://192.168.2.4:8082/api/banner/query',data: {moduleType: 1,platformValue: 1},dataType: 'json',success: (reponse) => {this.bannerList = reponse.data.list[0].imageList},error: function (xhr, type) {// alert('加载出错!');console.log(xhr, type);}});},},created() {this.getBannerList()},

解决方案就是调用成功后去new swiper，就能正常实现轮播啦

methods: {//获取轮播图getBannerList() {$.ajax({type: 'GET',url: 'http://192.168.2.4:8082/api/banner/query',data: {moduleType: 1,platformValue: 1},dataType: 'json',success: (reponse) => {this.bannerList = reponse.data.list[0].imageListthis.$nextTick(() => {var mySwiper = new Swiper('.swiper-container-pc', {autoplay: {delay: 5000,disableOnInteraction: false,},loop: true, // 循环模式选项speed: 1000, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',type: 'custom',autoplayDisableOnInteraction: false,renderCustom: function (swiper, current,total) {var paginationHtml = " ";for (var i = 0; i < total; i++) {// 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类if (i === (current - 1)) {paginationHtml +='<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';} else {paginationHtml +='<span class="swiper-pagination-customs"></span>';}}return paginationHtml;},},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},})})},error: function (xhr, type) {// alert('加载出错!');console.log(xhr, type);}});},},

在html中使用swiper插件实现轮播图效果相关推荐

Vue项目中使用swiper插件开发3d轮播图
在开发过程中有3D轮播图的需求,使用vue-awesome-swiper完成先贴个效果图安装npm install swiper@5.4.5 vue-awesome-swiper -S 全局引入并 ...
html中多个图片轮播代码怎么写,Html5如何快速在页面中写出多个轮播图效果
我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里 ...
【Vue项目笔记心得】Swiper插件用于轮播图
1.下载一个版本的swiper,这里以5.4.5为例, 在项目开发过程中需要安装swiper插件 npm install swiper@5 官网地址:Swiper中文网-轮播图幻灯片js插件,H5页面 ...
html中轮换图片插件,jQuery轮播图插件
插件描述:该插件基于jquery开发,现阶段很多PC网站都需要用到轮播图切换的效果全屏轮播图该插件基于jquery开发,现阶段很多PC网站都需要用到轮播图切换的效果,很多时候要在页面中复用轮播图, ...
html轮播图添加文字,（swiper插件）轮播图，下面的文字随图片进行翻页
效果:(图片来源网路) Html: 广播通知:你好你好你好!!!! 欢迎来到这里,welcome,这是轮播图的第二条消息 css: *{ margin:0; padding:0; } .slider ...
在微信小程序中，swiper组件（轮播图4）的常用属性
swiper组件的常用属性属性类型默认值说明 indicator-dots boolean false 是否显示版面指示点 indicator-color color rgba(0,0,0,3 ...
swiper插件实现轮播图
使用原生JS和使用插件实现轮播图
网页上的大致轮播图的滚动就是上面的演示轮播图的制作在制作轮播图的过程中我分成3步:框架的搭建--样式的装扮--动画效果. 1.框架的搭建如下代码展示,就是先在HTML里搭建出一个框架来: < ...
【微信小程序】小程序实现轮播图效果--swiper组件(一步步教你如何实现)
文章目录前言 1.引入外部链接图片资源 2.让swiper来调整适应图片的宽高 3.实现轮播效果--autoplay 总结欢迎点赞,收藏,加关注前言此例子是用微信小程序组件swiper来实现轮 ...

在html中使用swiper插件实现轮播图效果

在html中使用swiper插件实现轮播图效果相关推荐

最新文章

热门文章