Swiper实现全屏视觉差轮播

Swiper作为当代流行的js框架,非常受到青睐,这里演示swiper在pc端全屏视觉轮播的效果,这也是pc端常用的一种特性

一  以教师节为主题的一个全屏轮播

 1 首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件以及jquery-1.11.3.min.js官网都有(可以下载完整的压缩文件)

 <link rel="stylesheet" href="css/swiper.min.css" >
      <script src="js/jquery-1.11.3.min.js"></script>
     <script src="js/swiper.min.js"></script>

        2  .HTML内容

    //四张图片轮播 这里说一下全屏轮播的思想,首先,全屏轮播有两种方式来显示图片

     1  使用img标签:使用img属性如果想让图片能够全屏展示,同时图片内容居中,我们需要设置width:100%,但是这样设置会使得你的图片等比的压缩,有时候达不到我们想要的效果,

         你也可以采取定位来放置图片,但是在不同浏览器之间有些许瑕疵,(很多网站都是用过img属性来设置,也可以采纳)

    2  使用background属性:这是我常用的一个方法,分享给大家,我们将要展示的图片设置为背景图片,(很多网站的图片都是链接,因此放在a中)设置属性a{display:block;height:‘图片高度’)

        同时在标签中加入 style=" background: url(xxx) no-repeat center "样式,就能使得图片满屏并且内容居中,可以通过下面代码看一下

    <div class="banner">
       <div class="swiper-container myswiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#" style=" background: url(image/2.jpg) no-repeat center ">          
                    </a>
                </div>
                <div class="swiper-slide"  style=" background: url(image/4.jpg) no-repeat center ">
                    <a href="#">      
                    </a>
                </div>
                <div class="swiper-slide"  style=" background: url(image/2.jpg) no-repeat center ">
                    <a href="#">
                    </a>
                </div>
                <div class="swiper-slide"  style=" background: url(image/4.jpg) no-repeat center ">
                    <a href="#">
                    </a>
                </div>
                

      </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev  mySwiperBut"></div>
    <div class="swiper-button-next  mySwiperBut"></div>
    </div>//可以修改一下按钮样式,这里不细说,见上一节

4.初始化Swiper

   <script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical',//默认水平
    loop: true,
    autoplay:true,
    effect:"fade",//淡入淡出效果
    parallax:"true",//产生视觉差
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      clickableClass : 'my-pagination-clickable',
    
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
  })        
  </script>

二 视觉差效果(其实这个很简单,在API文档中介绍了)

 parallax

设置为true开启视差效果。

效果可以应用于container或slide的子元素。当应用于container的子元素(常用于视差背景图),每次切换时视差效果仅有设定值的slide个数-1分之1 1.视差位移变化 在所需要的元素上增加data-swiper-parallax属性(与Swiper切换方向相同)或data-swiper-parallax-x (x方向) data-swiper-parallax-y(y方向) data-swiper-parallax接受两种类型的参数。           number(单位:px),如-300,从右边300px进入左边出去。           percentage(百分比),移动距离=该元素宽度 * percentage。 2.视差透明度变化 在所需要的元素上增加data-swiper-parallax-opacity属性。可选值0-1,如0.5,从半透明进入半透明出去 3.视差缩放变化 在所需要的元素上增加data-swiper-parallax-scale属性。可选值如0.5,从一半大小进入一半大小出去 还可通过data-swiper-parallax-duration设定视差动画持续时间(ms)。默认值是Swiper的speed,与切换时间同步。 *设定透明度或缩放必须同时设定位移,否则无效(4.0.5) <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>

    视觉差演示代码(直接在上面全屏轮播进行的修改)//script中将视觉差开启设置为true,同时在内容中加入data-swiper-parallax="xxx"(xxx一般为负值)

    <div class="banner">
       <div class="swiper-container myswiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#" style=" background: url(image/2.jpg) no-repeat center ">
                        <div class="text" data-swiper-parallax="-100">
                              We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
                           who chooses out first one and then another for his prey. So it is that in our good <br/>
                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
                           mutilation, loss of sight or reason
                        </div> 
                    </a>
                </div>
                <div class="swiper-slide"  style=" background: url(image/4.jpg) no-repeat center ">
                    <a href="#">
                        <div class="text" data-swiper-parallax="-200">//值为-200
                              We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
                           who chooses out first one and then another for his prey. So it is that in our good <br/>
                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
                           mutilation, loss of sight or reason
                        </div> //加入内容体现视觉差
                    </a>
                </div>
                <div class="swiper-slide"  style=" background: url(image/2.jpg) no-repeat center ">
                    <a href="#">
                       <div class="text" data-swiper-parallax="-300">
                              We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
                           who chooses out first one and then another for his prey. So it is that in our good <br/>
                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
                           mutilation, loss of sight or reason
                        </div> 
                    </a>
                </div>
                <div class="swiper-slide"  style=" background: url(image/4.jpg) no-repeat center ">
                    <a href="#">
                     <div class="text" data-swiper-parallax="-400">
                              We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
                           who chooses out first one and then another for his prey. So it is that in our good <br/>
                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
                           mutilation, loss of sight or reason
                        </div> 
                    </a>
                </div>
      </div>

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现全屏的视觉差效果轮播</title>
      <link rel="stylesheet" href="css/swiper.min.css" >
      <script src="js/jquery-1.11.3.min.js"></script>
     <script src="js/swiper.min.js"></script>
     <style>
         *{
             margin:0px;
             padding:0px;
         }
         .banner{
             margin-top:40px;
         }
      .swiper-slide a{
          display: block;
          height: 500px;
          overflow: hidden;
          text-decoration: none;
      }   
      .text{
          color: #000;
          font-size: 20px;
          position: absolute;
          left: 10%;
          top:50%;

      }
     </style>
</head>
<body>
    <div class="banner">
       <div class="swiper-container myswiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#" style=" background: url(image/2.jpg) no-repeat center ">
                        <div class="text" data-swiper-parallax="-100">
                              We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
                           who chooses out first one and then another for his prey. So it is that in our good <br/>
                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
                           mutilation, loss of sight or reason
                        </div> 
                    </a>
                </div>
                <div class="swiper-slide"  style=" background: url(image/4.jpg) no-repeat center ">
                    <a href="#">
                        <div class="text" data-swiper-parallax="-200">
                              We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
                           who chooses out first one and then another for his prey. So it is that in our good <br/>
                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
                           mutilation, loss of sight or reason
                        </div> 
                    </a>
                </div>
                <div class="swiper-slide"  style=" background: url(image/2.jpg) no-repeat center ">
                    <a href="#">
                       <div class="text" data-swiper-parallax="-300">
                              We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
                           who chooses out first one and then another for his prey. So it is that in our good <br/>
                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
                           mutilation, loss of sight or reason
                        </div> 
                    </a>
                </div>
                <div class="swiper-slide"  style=" background: url(image/4.jpg) no-repeat center ">
                    <a href="#">
                     <div class="text" data-swiper-parallax="-400">
                              We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
                           who chooses out first one and then another for his prey. So it is that in our good <br/>
                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
                           mutilation, loss of sight or reason
                        </div> 
                    </a>
                </div>
                

      </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev  mySwiperBut"></div>
    <div class="swiper-button-next  mySwiperBut"></div>
    </div>
    <script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical',
    loop: true,
    autoplay:true,
    effect:"fade",
    parallax:"true",
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      clickableClass : 'my-pagination-clickable',
    
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
  })        
  </script>
</body>
</html>
//图片地址http://show.huitu.com/pic/20180904/r38905.jpg

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

前端特效开发 | 图片翻转的制作

HTML5学堂(码匠):在前端开发中,针对效果层面的开发,使用原生JS往往会因其冗长的代码严重影响到开发进度。比如一个简单的图片翻转效果,我们能否考虑借助某些简...

4827
来自专栏web开发

img标签实现和背景图一样的显示效果——object-fit和object-position

不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实...

3966
来自专栏十月梦想

移动端适配之viewport适配

前面说过了比例缩放适配,本来想直接介绍rem适配!还是补充一下这个viewport适配吧!其实这个viewport也归属于比例缩放适配的一种吧!

1191
来自专栏DannyHoo的专栏

设置导航栏的背景色和标签栏的背景色

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

2252
来自专栏全沾开发(huā)

background-clip的正确使用姿势

background-clip可以用来控制背景图片/颜色的填充范围。 我们知道,默认的background会填充盒模型的content+padding+bord...

3419
来自专栏Java帮帮-微信公众号-技术文章全总结

03.HTML头部/CSS/图像/表格/列表

03.HTML头部/CSS/图像/表格/列表 HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义...

9629
来自专栏小白安全

HTML+CSS基础到精通系统学习

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使...

3505
来自专栏超然的博客

响应式图像

将picture元素和srcset,sizes属性纳入html5规范,新规范意在解决:

701
来自专栏企鹅号快讯

css层叠样式表

CSS概述 CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表 主要作用 为了让网页元素的样式更加...

39811
来自专栏别先生

HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接...

2109

扫码关注云+社区

领取腾讯云代金券