图片轮播——Swiper实例

最新推荐文章于 2024-06-24 11:18:12 发布
最新推荐文章于 2024-06-24 11:18:12 发布
阅读量1.6k 收藏 8
点赞数
分类专栏： JS 文章标签： swiper js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/typ1805/article/details/103593500
版权

一、Swiper简介

     Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。

Swiper 完全免费并开源（MIT Licensed），无论你使用在个人网站或商业网站，都无需付费。

官网：https://www.swiper.com.cn/

二、实例

1、效果图

1.1、缩放型

1.2、3D界面

1.3、Y轴位移

1.4、旋转

1.5、立方体效果

1.6、3d翻转

2、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper Demo</title>
    <!--<link rel="stylesheet" href="css/swiper.min.css">-->
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <style>
        .myswiper {
            width: 1200px;
            margin: auto;
            text-align: center;
        }
    img{
	   width:200px;
           height:260px;
	}
    </style>
</head>
<body>
<div class="myswiper">
    <!--缩放型-->
    <div class="swiper-container demo1">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>
    </div>

    <!--3D界面-->
    <div class="swiper-container demo2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>
    </div>

    <!--Y轴位移-->
    <div class="swiper-container demo3">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>
    </div>

    <!--旋转-->
    <div class="swiper-container demo4">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>
    </div>

    <!--立方体效果-->
    <div class="swiper-container demo5">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
        </div>
    </div>

    <!--3d翻转-->
    <div class="swiper-container demo6">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
            <div class="swiper-slide">
                <img src="img/imgdemo.png">
            </div>
        </div>
    </div>

</div>
</body>
<!--<script src="js/swiper.min.js"></script>-->
<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
<script>
    // 缩放型
    var swiper = new Swiper('.demo1', {
        loop: true,
        speed: 2500,
        slidesPerView: 5,
        spaceBetween: 30,
        centeredSlides: true,
        watchSlidesProgress: true,
        on: {
            setTranslate: function () {
                slides = this.slides;
                for (i = 0; i < slides.length; i++) {
                    slide = slides.eq(i);
                    progress = slides[i].progress;
                    slide.css({'opacity': '', 'background': ''});
                    slide.transform('');//清除样式
                    slide.transform('scale(' + (1 - Math.abs(progress) / 8) + ')');
                }
            },
            setTransition: function (transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }
            }
        },
        // 显示左右滚动条
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        // 显示分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });

    // 3D界面
    var swiper = new Swiper('.demo2', {
        loop: true,
        mousewheel: true, // 鼠标滚动
        effect: 'coverflow',
        slidesPerView: 3,
        centeredSlides: true,
        coverflowEffect: {
            rotate: 30,
            stretch: 10,
            depth: 60,
            modifier: 2,
            slideShadows: true
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        // 显示分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });

    // Y轴位移
    var swiper = new Swiper('.demo3', {
        loop: true,
        speed: 2500,
        slidesPerView: 5,
        spaceBetween: 30,
        centeredSlides: true,
        watchSlidesProgress: true,
        on: {
            setTranslate: function () {
                slides = this.slides;
                for (i = 0; i < slides.length; i++) {
                    slide = slides.eq(i);
                    progress = slides[i].progress;
                    slide.css({'opacity': '', 'background': ''});
                    slide.transform('');
                    slide.css('opacity',(1-Math.abs(progress)/6));
                    slide.transform('translate3d(0,'+ Math.abs(progress)*20+'px, 0)');
                }
            },
            setTransition: function (transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }
            }
        },
        // 显示左右滚动条
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        // 显示分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });

    // 旋转
    var swiper = new Swiper('.demo4', {
        loop: true,
        speed: 2500,
        slidesPerView: 5,
        spaceBetween: 30,
        centeredSlides: true,
        watchSlidesProgress: true,
        on: {
            setTranslate: function () {
                slides = this.slides;
                for (i = 0; i < slides.length; i++) {
                    slide = slides.eq(i);
                    progress = slides[i].progress;
                    slide.css({'opacity': '', 'background': ''});
                    slide.transform('');
                    slide.transform('rotate('+ progress*30+'deg)');
                }
            },
            setTransition: function (transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }
            }
        },
        // 显示左右滚动条
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        // 显示分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });

    // 立方体效果
    var swiper = new Swiper('.demo5', {
        loop: true,
        mousewheel: true, // 鼠标滚动
        effect : 'cube',
        cubeEffect: {
            slideShadows: true,
            shadow: true,
            shadowOffset: 100,
            shadowScale: 0.6
        }
    });

    // 3d翻转
    var swiper = new Swiper('.demo6', {
        loop: true,
        mousewheel: true, // 鼠标滚动
        effect : 'flip',
        flipEffect: {
            slideShadows : true,
            limitRotation : true,
        }
    });
</script>
</html>

官网API地址：https://www.swiper.com.cn/api/index.html

 

tansci
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
swiper轮播图代码实例
qq_34935232的博客
10-19 2413
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <script src="./js/swiper.min.js"></script> <script src='./js/index.js'></script> <style media="s
swiper轮播图
weixin_43517869的博客
10-11 396
准备工具: swiper.min.css animate.min.css swiper.min.js swiper.animate.min.js app.js jquery.js 写法： 1）引入css文件和js文件 例： 2）在body里添加代码 例： div 中的图片可随意定义 3）给下标点 左点 右点设置样式： 例： 4）添加js代...
swiper.js-全屏动画切换效果实现
weixin_34087307的博客
02-15 1468
为什么80%的码农都做不了架构师？>>> ...
Swiper 立体旋转 循环旋转大图特效 自写
11-27
Swiper 立体旋转特效 循环旋转特效 可添加回调函数 知道Swiper的同志可以下载 共同学习下
swiper实例
linzi999的博客
06-24 348
大家好，我是燐子，今天给大家带来swiper实例微信小程序中的swiper组件是一种用于创建滑动视图的容器组件，常用于实现图片轮播、广告展示等效果。它通过一系列的子组件来定义滑动视图的每一个页面。
Swiper插件的基本使用方法和案例
道阻且长，行则将至。
07-09 7278
Swiper插件的基本使用方法和案例 一、Swiper是什么？ Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 二、Swiper使用的步骤 步骤一、点我进入Swiper官网，下载Swiper animate 动画js和Swiper animate 动
swiper在vue中的使用
m0_65005642的博客
12-27 2093
安装Swiper（选择5.x版本的相对较稳定） 执行命令 npm install --save swiper@5 <template> <!-- Swiper6之前默认容器是'.swiper-container' --> <div class="swiper-container" ref="cur"> <div class="swiper-wrapper"> <div class="swipe
【仿写网站】用swiper实现故宫博物院首页轮播图
qq_45196785的博客
12-31 1382
官网（故宫博物院 (dpm.org.cn)）效果如下： 仿写网页效果如下： 代码结构如下： index.html代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> <head> <title>故宫博物院</title> <meta http-equiv="Content-Type" content="text/html
swiper3D轮播图专属案例
weixin_48173033的博客
06-05 794
先安转swiper的各种依赖包：npm install vue-awesome-swiper(如果是vue2请安装4.1.*的版本)，slidesPerView: 'auto', // 3 这个是三个轮播切换没三组切换一次。//loop: true, // 循环参数。// loop: true, // 循环参数。
js使用swiper实现层叠轮播效果实例代码
12-09
swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了，下面就来开始本文的正文内容 实现过程： 一.移动端-需求swiper 4.0.3实现层叠轮播 ...
非常优秀的JS图片轮播插件Swiper的用法
10-20
Swiper是一款功能强大的JavaScript图片轮播插件，广泛应用于网页设计和移动应用中，提供丰富的定制选项和流畅的用户体验。以下将详细介绍Swiper的基本用法和关键配置。 首先，使用Swiper的前提是需要引入必要的文件...
Swiper制作图片轮播切换特效
07-24
Swiper是一种广泛应用于网页设计中的JavaScript库，专用于创建高质量的滑动内容，如图片轮播、幻灯片展示等。这款库凭借其强大的功能和灵活性，成为了许多开发者制作动态内容的首选工具。在"Swiper制作图片轮播切换...
swiper 自动图片无限轮播实现代码
08-27
swiper 自动图片无限轮播实现代码 在移动端开发中，图片无限轮播是一种常见的交互效果，今天我们就来讲述如何使用 Swiper 库来实现图片无限轮播。 首先，我们需要引入 Swiper 的 CSS 和 JavaScript 文件。Swiper ...
h5官网使用swiper.js自定义首页轮播
weixin_52365350的博客
04-06 1195
首页效果 功能效果 点击左下角按钮实现轮播切换，中间进度条自动填充，待进度条填满，轮播自动滚动。 代码实现 1.首先引入swiper.min.css 以及swiper.min.js 2.初始化swiper实例 var mySwiper = new Swiper('.swiper-container', { freeMode: true, cssMode: true, mousewheel: true, keyboard: false, ..
Swiper轮播图
mygoes
11-02 449
Swiper轮播图运行 Swiper 的 Demo 步骤：在 vue 中运行 Swiper 的坑：在 vue 中运行 Swiper 的步骤： 官方链接： 1、Swiper 官网 2、在 vue 中使用 Swiper 3、 Swiper 的 CDN 运行 Swiper 的 Demo 步骤： 进入Swiper 官网 → 首页 → 查看Swiper演示→ 在新窗口打开 → （右击鼠标）查看网页源代码 例????子： <!DOCTYPE html> <html lang="en">
使用 Swiper4.5.3、Swiper11 的示例
Lyrelion的博客
07-23 4960
使用 Swiper4.5.3、Swiper11 的示例
【小程序】轮播图swiper的实例（图文+代码）
【敦厚的曹操】的专栏
01-17 2005
1、swiper.wxml <view> <swiper class="banner" indicator-dots="true" indicator-color="0,0,0,0.8" indicator-active-color="white" autoplay="true" interval="1500" circular="true" > <swiper-item> &l...
Swiper使用说明
热门推荐
突然空闲
06-02 1万+
Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。 特征（feature) 1、1：1触控运动     Swiper默认提供1:1的触
swiper 偏移问题
gao1017的博客
03-03 1708
swiper根据内容变动，自动初始化插件的添加observer：true var mySwiper = new Swiper（‘.swiper- container’，｛ loop：true， observer：true，//修改swiper自己或子元素时自动初始化swiper observerParents：true//修改swiper的父元素时，自动初始化swiper｝） ...
swiper 嵌套轮播 内部swiper不会轮播
最新发布
07-03
Swiper 是一款非常流行的 JavaScript 平台，用于创建响应式触摸滑动幻灯片和轮播组件。嵌套 Swiper 是指在一个 Swiper 实例中包含另一个 Swiper 实例的情况，通常是为了实现不同级别的导航或子级内容的切换。 然而，如果内部的 Swiper 没有正确配置或者没有触发它的滑动事件（例如 `.next()` 或者 `.slideTo()`），那么它可能不会自动轮播。这可能是由于以下几个原因： 1. **缺少初始化**：内部 Swiper 需要在外部 Swiper 初始化后被单独初始化，否则可能会忽略父 Swiper 对其控制的影响。 2. **禁止自动播放**：内部 Swiper 可能设置了 `autoplayDisableOnInteraction: true`，阻止了在用户交互时的自动播放功能。 3. **父 Swiper 控制**：如果没有正确设置，外部 Swiper 可能没有将内部 Swiper 包含在其滑动控制范围内。 4. **事件监听问题**：外部 Swiper 的事件（如 slideChange）可能没有绑定到内部 Swiper 上，导致内部滑动不生效。 解决方法包括检查并确保以下步骤： - **正确初始化**：为内部 Swiper 添加正确的初始化代码。 - **解除交互限制**：如果需要，修改内部 Swiper 的 autoplay 设置。 - **关联事件**：在外部 Swiper 上绑定事件，使其能够控制内部 Swiper。 - **查看文档**：确认嵌套 Swiper 的使用示例或查阅 Swiper 文档中的相关章节，确保正确配置。 如果你遇到具体的问题，提供更多的代码片段将有助于更准确地诊断问题。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值