搜索

当前位置:首页 > 全栈分享 > JavaScript > 正文

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

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

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

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

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

下面是全部代码(已做了详细标注,原swiper.css和swiper.js我都有修改,想跟我轮播图效果一样的,直接文末下载):
  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
  6. <title>3D方块切换轮播图-js/jquery-魏义齐个人博客</title> 
  7. <link rel="stylesheet" href="css/swiper.css"> 
  8. <style> 
  9. * { 
  10.     margin: 0; 
  11.     padding: 0; 
  12. .swiper-container { 
  13.     max-width: 825px; 
  14.     max-height: 304px; 
  15. .swiper-slide img { 
  16.     width: 100%; 
  17.     height: 100%; 
  18. </style> 
  19. </head> 
  20.  
  21. <body> 
  22. <div class="swiper-container"> 
  23.   <div class="swiper-wrapper"> 
  24.     <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/1.jpg"></a></div> 
  25.     <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/2.jpg"></a></div> 
  26.     <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/3.jpg"></a></div> 
  27.     <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/4.jpg"></a></div> 
  28.     <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/5.jpg"></a></div> 
  29.     <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/6.jpg"></a></div> 
  30.     <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/7.jpg"></a></div> 
  31.     <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/8.jpg"></a></div> 
  32.     <div class="swiper-slide"><a href="#" target="_blank" title=""><img src="images/9.jpg"></a></div> 
  33.   </div> 
  34.   <!--前进后退控制按钮--> 
  35.   <div class="swiper-button-next"></div> 
  36.   <div class="swiper-button-prev"></div> 
  37.   <!--指示切换到第几张--> 
  38.   <div class="swiper-pagination"></div> 
  39. </div> 
  40. <script src="js/swiper.js"></script>  
  41. <script>         
  42.   var mySwiper = new Swiper ('.swiper-container', { 
  43.     direction: 'horizontal', //切换方向,vertical为垂直切换 
  44.     loop: true, //是否循环 
  45.     autoplay: {  
  46.         delay: 3000, //轮播间隔时间 
  47.         disableOnInteraction: false, //对轮播图操作后依然自动播放 
  48.     }, 
  49.     speed: 1500, //一张图片完成运动需要的时间 
  50.     effect: 'cube', //3D方块切换 
  51.     grabCursor: true, 
  52.     cubeEffect: { 
  53.         shadow: false, //是否显示投影 
  54.         slideShadows: true, //是否显示slide阴影 
  55.         shadowOffset: 20, //投影距离 
  56.         shadowScale: 0.94, //投影缩放比例 
  57.     }, 
  58.     //前进后退控制按钮 
  59.     navigation: { 
  60.         nextEl: '.swiper-button-next', 
  61.         prevEl: '.swiper-button-prev', 
  62.     }, 
  63.     //指示切换到第几张 
  64.     pagination: { 
  65.         el: '.swiper-pagination', 
  66.         type: 'fraction', 
  67.     }, 
  68.   })         
  69. </script> 
  70. </body> 
  71. </html> 
注意事项

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

2.如果使用swiper.min.js移动端轮播图不会全屏,解决方法必须使用swiper.js,将
  1. .transform(("translate3d(0px,0," + zFactor + "px) rotateX 
修改为
  1. .transform(("translate3d(0px,0,0px) rotateX 
3.不同版本的swiper其组件使用上略有不同,所以请不要百度找别人的swiper配置,官方提供的可以满足你所有的需求,在基础演示里有在新窗口打开,你只需要在新窗口打开复制他的源代码就行了,怎么组合在于你自己。

4.
  1. autoplay: {  
  2.         delay: 3000, //轮播间隔时间 
  3.         disableOnInteraction: false//对轮播图操作后依然自动播放 
  4. }, 
如果要轮播图被操作后依然自动播放,此处必须这样写,这样写轮播图默认自动播放,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图片做投影或外发光,但这需要不断测试,直到你喜欢的样子。

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

魏义齐全栈技术交流:魏义齐全栈技术交流

上一篇:网站防扒的一般措施下一篇:表单验证常用的正则表达式

赞助本站

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包