今天的轮播图,和往常的有一点点不同哦!可以说是有一点点的3D效果!因为他在运动的时候,是以正方体的样子左右滚动的;

先引插件:

<link rel="stylesheet" href="swiper.css">
<script src="swiper.js"></script>

然后还是那句话:翠花,上代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Swiper demo</title>

	<meta name="viewport" content="width=device-width,initial-scale=1"/>

    <link rel="stylesheet" href="swiper.css">

    <style>

    /*样式*/

    html, body {

        position: relative;

        height: 100%;

    }

    body {

        background: #fff;

        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

        font-size: 14px;

        color:#000;

        margin: 0;

        padding: 0;

    }

    img{

    	width: 100%;

    	height: 100%;

    }

    .swiper-container {

        width: 500px;

        height: 500px;

        position: absolute;

        left: 45%;

        top: 35%;

        margin-left: -150px;

        margin-top: -150px;

    }

    .swiper-slide {

        background-position: center;

        background-size: cover;

    }

    </style>

</head>

<body>

<!-- Swiper轮播图 -->

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>

            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>

            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>

            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>

            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>

        </div>

        <div class="swiper-pagination"></div>

    </div>

    <script src="swiper.js"></script>

   <script>

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

        pagination: '.swiper-pagination',

        //循环 往返的动

        loop:true,

                //小白点不能点击

		autoplayDisableOnInteraction:false,

        effect: 'cube',

        grabCursor: true,

        cube: {

            shadow: true,

            slideShadows: true,

            shadowOffset: 20,

            shadowScale: 0.94

        }

    });

    </script>

</body>

</html>

　　有没有很简单啊!!!

Swiper正方体,左右翻转轮播图的更多相关文章

  1. 小程序实践（二）：swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  2. 使用swiper来实现轮播图

    使用swiper来实现轮播图 swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好. 由于简单这里当然就不会去详细介绍了,推荐两个网址: 1.http://ww ...

  3. swiper插件制作轮播图swiper2.x和3.x区别

    swiper3.x仅仅兼容到ie10+.比較适合移动端. swiper3.x官网  http://www.swiper.com.cn/ swiper2.x能够兼容到ie7+.官网是http://swi ...

  4. 动态初始化swiper时，轮播图划不动得各种bug解决方法

    var mybanner = new Swiper('.i-gd-banner', { speed: 500, loop: true, observer:true,//修改swiper自己或子元素时, ...

  5. 移动端轮播图vue-awesome-swiper

    日常写设计文档,日常写Demo,写轮播图的时候觉得bootstrap不适合移动端,或者说不是轻量级的,于是换成Swiper,但是写的时候才发现怎么把这东西嵌到Vue里面啊? Σ( ° △ °|||)︴ ...

  6. react-native构建基本页面2---轮播图+九宫格

    配置首页的轮播图 轮播图官网 运行npm i react-native-swiper --save安装轮播图组件 导入轮播图组件import Swiper from 'react-native-swi ...

  7. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  8. swiper轮播图--兼容IE8

    //引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...

  9. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

随机推荐

  1. QQ第三方登陆示例

    先上图 若想实现QQ登录,需要成为QQ互联的开发者,审核通过才可实现.注册方法可参考链接http://wiki.connect.qq.com/%E6%88%90%E4%B8%BA%E5%BC%80%E ...

  2. 基础篇：3.3）规范化：3d装配图

    本章目的:规范化3d零件装配图,弄清楚装配层级划分,这也是机械的基本功夫. 1.装配通用原则 在装配建模设计中,应遵循以下通用原则:a)所有的装配单元应具有唯一性和稳定性,不允许冗余元素存在: //就 ...

  3. 123th LeetCode Weekly Contest Broken Calculator

    On a broken calculator that has a number showing on its display, we can perform two operations: Doub ...

  4. laravel5.8的使用

    首先,确定电脑已经安装了composer.最好是全局安装 然后打开phpstorm的控制台: composer create-project --prefer-dist laravel/laravel ...

  5. 使用python requests库写接口自动化测试--记录学习过程中遇到的坑（1）

    一直听说python requests库对于接口自动化测试特别合适,但由于自身代码基础薄弱,一直没有实践: 这次赶上公司项目需要,同事小伙伴们一起学习写接口自动化脚本,听起来特别给力,赶紧实践一把: ...

  6. localStorage、sessionStorage用法总结

    1.作用 1.1 共同点:       都是用来存储客户端临时信息的对象.       均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现). 1.2 ...

  7. 012-MD5Utils工具类模板

    package ${enclosing_package}; import java.math.BigInteger; import java.security.MessageDigest; impor ...

  8. emacs 配置 clojure

    安装JDK,Version >= 6.0 java -version 2 安装EMACS,Version>=24 在脚本~/.emacs.d/init.el中增加如下内容 (require ...

  9. React.js 小书 Lesson20 - 更新阶段的组件生命周期

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...

  10. Scrum 冲刺博客第一篇

    一.各个成员在 Alpha 阶段认领的任务 成员 Alpha 阶段认领的任务 黄腾龙 主要功能模块代码开发 叶城龙 部分模块代码开发,博客撰写 李心宇 代码测试,博客撰写 余腾鑫 界面设计,博客撰写 ...