图片轮播——Swiper实例

最新推荐文章于 2024-06-24 11:18:12 发布
最新推荐文章于 2024-06-24 11:18:12 发布
阅读量1.5k 收藏 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实现轮播效果
mantou_riji的博客
02-29 763
swiper官网：https://3.swiper.com.cn/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title>
Swiper 立体旋转 循环旋转大图特效 自写
11-27
Swiper 立体旋转特效 循环旋转特效 可添加回调函数 知道Swiper的同志可以下载 共同学习下
swiper实例
最新发布
linzi999的博客
06-24 335
大家好，我是燐子，今天给大家带来swiper实例微信小程序中的swiper组件是一种用于创建滑动视图的容器组件，常用于实现图片轮播、广告展示等效果。它通过一系列的子组件来定义滑动视图的每一个页面。
Swiper插件的基本使用方法和案例
道阻且长，行则将至。
07-09 7173
Swiper插件的基本使用方法和案例 一、Swiper是什么？ Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 二、Swiper使用的步骤 步骤一、点我进入Swiper官网，下载Swiper animate 动画js和Swiper animate 动
swiper在vue中的使用
m0_65005642的博客
12-27 2088
安装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 1354
官网（故宫博物院 (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 773
先安转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 ...
Swiper轮播图
mygoes
11-02 446
Swiper轮播图运行 Swiper 的 Demo 步骤：在 vue 中运行 Swiper 的坑：在 vue 中运行 Swiper 的步骤： 官方链接： 1、Swiper 官网 2、在 vue 中使用 Swiper 3、 Swiper 的 CDN 运行 Swiper 的 Demo 步骤： 进入Swiper 官网 → 首页 → 查看Swiper演示→ 在新窗口打开 → （右击鼠标）查看网页源代码 例????子： <!DOCTYPE html> <html lang="en">
h5官网使用swiper.js自定义首页轮播
weixin_52365350的博客
04-06 1178
首页效果 功能效果 点击左下角按钮实现轮播切换，中间进度条自动填充，待进度条填满，轮播自动滚动。 代码实现 1.首先引入swiper.min.css 以及swiper.min.js 2.初始化swiper实例 var mySwiper = new Swiper('.swiper-container', { freeMode: true, cssMode: true, mousewheel: true, keyboard: false, ..
使用 Swiper4.5.3、Swiper11 的示例
Lyrelion的博客
07-23 4779
使用 Swiper4.5.3、Swiper11 的示例
【小程序】轮播图swiper的实例（图文+代码）
【敦厚的曹操】的专栏
01-17 1997
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 1693
swiper根据内容变动，自动初始化插件的添加observer：true var mySwiper = new Swiper（‘.swiper- container’，｛ loop：true， observer：true，//修改swiper自己或子元素时自动初始化swiper observerParents：true//修改swiper的父元素时，自动初始化swiper｝） ...
swper_Swiper 中文API手册（share）
weixin_39595085的博客
12-19 491
Usage:1、下载swiper最新版本https://github.com/nolimits4web/Swiper2、在HTMLHead中添加Swiper'sCSSandJS:1 2 ....3 4 5 ....6 其中引用的文件名以下载的为准。3、使用下面的HTML布局1 2 3 4 5 6 7 8...
swiper插件 缩略图上下联动，点击缩略图自动位移（点左边的往右移动，点右边的往左边移动）
weixin_44705979的博客
06-06 1215
1.需求 两个swiper 下面一个是缩略图点击缩略图上面一个swiper显示大图，点击下发缩略图的swiper会有滚动效果方便点击。
swiper全屏自适应轮播图片尺寸
11-12
Swiper全屏自适应轮播图片尺寸是指使用Swiper这个轮播插件来实现全屏自适应的图片尺寸展示。Swiper是一个基于原生JavaScript的轮播插件，可以通过设置参数来实现全屏自适应的效果。 首先，我们需要准备好轮播图片，保证图片的尺寸符合要求。一般来说，我们最好将图片尺寸设置为与屏幕分辨率相同或者相近的大小，这样可以在不同的设备上展示出较高的清晰度。 然后，在HTML中引入Swiper的CSS和JS文件，并创建一个容器来放置轮播图片。 接下来，在JavaScript中初始化Swiper插件，设置相关参数。其中，我们需要将轮播容器的宽度和高度设置为100%来实现全屏自适应的效果。可以将容器的宽度和高度设置为浏览器视口的宽度和高度，使用`window.innerWidth`和`window.innerHeight`来获取。 另外，我们还可以设置`effect`参数为"slide"或者"fade"，来定义轮播的切换效果。还可以设置`autoplay`参数为true，来自动播放轮播图片。 最后，加载页面时，Swiper会自动根据设置的参数和轮播容器的尺寸来适应图片展示。当屏幕尺寸改变时，Swiper会自动重新计算并调整图片的尺寸，以达到全屏自适应的效果。 综上所述，通过设置合适的参数和容器尺寸，我们可以实现Swiper全屏自适应轮播图片的效果。这样，无论在不同的设备上，轮播图片都能以适应屏幕的方式展示，提供更好的用户体验。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值