用swiper4给博客首页配置的一个3D方块切换轮播图

发布时间：2018-10-29 00:39:13作者：魏义齐阅读：()评论：

本文为博主原创文章，未经博主允许不得转载。

用swiper4给博客首页配置的一个3D方块切换轮播图，感兴趣的可以看看，注意事项和使用经验我写在了代码下面。

之前首页的轮播图用的是：自动播放响应式轮播图代码，但这个轮播插件有个bug就是在云加速刷新全站缓存后第一次加载不出来，第二次节点有缓存后加载就没问题了，这对seo是有很大影响的，因为如果一个新访客访问我的网站，浏览器上没有缓存、没向节点请求过数据，那么他看到的就是缺乏轮播图的首页，这样的首页给人的感受就是“渣”或者“垃圾站”，所以这个问题是必须要解决的。

下面是全部代码（已做了详细标注，原swiper.css和swiper.js我都有修改，想跟我轮播图效果一样的，直接文末下载）：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<title>3D方块切换轮播图-js/jquery-魏义齐个人博客</title>

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

<style>

* {

    margin: 0;

    padding: 0;

}

.swiper-container {

    max-width: 825px;

    max-height: 304px;

}

.swiper-slide img {

    width: 100%;

    height: 100%;

}

</style>

</head>

<body>

<div class="swiper-container">

  <div class="swiper-wrapper">

    <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/1.jpg"></a></div>

    <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/2.jpg"></a></div>

    <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/3.jpg"></a></div>

    <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/4.jpg"></a></div>

    <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/5.jpg"></a></div>

    <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/6.jpg"></a></div>

    <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/7.jpg"></a></div>

    <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/8.jpg"></a></div>

    <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/9.jpg"></a></div>

  </div>

  

  <div class="swiper-button-next"></div>

  <div class="swiper-button-prev"></div>

  

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

</div>

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

<script>

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

    direction: 'horizontal', //切换方向，vertical为垂直切换

    loop: true, //是否循环

    autoplay: {

        delay: 3000, //轮播间隔时间

        disableOnInteraction: false, //对轮播图操作后依然自动播放

    },

    speed: 1500, //一张图片完成运动需要的时间

    effect: 'cube', //3D方块切换

    grabCursor: true,

    cubeEffect: {

        shadow: false, //是否显示投影

        slideShadows: true, //是否显示slide阴影

        shadowOffset: 20, //投影距离

        shadowScale: 0.94, //投影缩放比例

    },

    //前进后退控制按钮

    navigation: {

        nextEl: '.swiper-button-next',

        prevEl: '.swiper-button-prev',

    },

    //指示切换到第几张

    pagination: {

        el: '.swiper-pagination',

        type: 'fraction',

    },

  })

</script>

</body>

</html>

注意事项：

1.我用的是swiper4，从swiper3开始不再全面支持pc端，本轮播图不兼容IE，包括IE11，谷歌、火狐和360安全浏览器均支持，swiper2虽然支持IE甚至IE7，但没有这个3D方块切换效果。

2.如果使用swiper.min.js移动端轮播图不会全屏，解决方法必须使用swiper.js，将

.transform(("translate3d(0px,0," + zFactor + "px) rotateX

修改为

.transform(("translate3d(0px,0,0px) rotateX

3.不同版本的swiper其组件使用上略有不同，所以请不要百度找别人的swiper配置，官方提供的可以满足你所有的需求，在基础演示里有在新窗口打开，你只需要在新窗口打开复制他的源代码就行了，怎么组合在于你自己。

autoplay: {

        delay: 3000, //轮播间隔时间

        disableOnInteraction: false, //对轮播图操作后依然自动播放

},

如果要轮播图被操作后依然自动播放，此处必须这样写，这样写轮播图默认自动播放，delay后面的值为轮播间隔时间，disableOnInteraction: false才会生效。

使用经验：如果是3D方块切换我这个是最佳组合了，什么进度条、自定义分页控制器你不用考虑，这个效果图片在切换时会超出外面的容器，可以想象加进度条有多难看，自定义分页控制器如果图多的话在移动端很难看，也不建议隐藏，因为指示当前切换到第几张是一个很人性化的考虑。

完整版下载：https://pan.baidu.com/s/1NyFd2EnljeHGTzIKZxnZiA 提取码：i6iy 使用方法替换图片即可。

延伸：控制前进后端的两个箭头刚开始我用的“<和>”，但是很难看，记得之前的轮播图是把字体改为宋体看着就正常了，大家可以试下；如果用css给png图片加阴影需要把箭头做成svg等矢量图形（仅支持HTML5），普通方法给png图片写阴影，比如div img {box-shadow:0 0 20px 0 #000000;}依然是给矩形阴影，而不是箭头本身；如果不想做矢量图形，那就直接用ps给png图片做投影或外发光，但这需要不断测试，直到你喜欢的样子。

本文标签：轮播图，您可以阅读与「轮播图」相关的所有文章

魏义齐全栈技术交流：