Other/其他

网站图片循环swiper横向轮播制作方法

也想出现在这里?联系我们
创客云

网站图片循环swiper横向轮播制作方法
相信大家在有的网站上会看到一些图片横向轮播的效果,它可以自动不断的横向轮播,也支持手动点击轮播。

怎么在自己做网站时,也制作这样的网站图片循环 swiper 横向轮播效果呢?下面就介绍一下制作方法。

也想出现在这里?联系我们
创客主机

第一步:在需要显示这种横向轮播的位置 ,放上以下的 HTML 代码;里面的图片可以换成自己的图片。

  1. <div id="certify">
  2. <div class="swiper-container">
  3. <div class="swiper-wrapper">
  4. <div class="swiper-slide"><img src="static/picture/certify01.png"><p>Picture information 1</p></div>
  5. <div class="swiper-slide"><img src="static/picture/certify02.png"><p>Picture information 2</p></div>
  6. <div class="swiper-slide"><img src="static/picture/certify03.png"><p>Picture information 3</p></div>
  7. <div class="swiper-slide"><img src="static/picture/certify04.png"><p>Picture information 4</p></div>
  8. <div class="swiper-slide"><img src="static/picture/certify05.png"><p>Picture information 5</p></div>
  9. </div>
  10. </div>
  11. <div class="swiper-pagination"></div>
  12. <div class="swiper-button-prev"></div>
  13. <div class="swiper-button-next"></div>
  14. </div>

第二步:在网页头部引入 swiper 横向轮播 JS 文件与 CSS 文件;

  1. <link rel="stylesheet" href="static/css/swiper.min.css">
  2. <link rel="stylesheet" href="static/css/certify.css">
  3. <script src="static/js/swiper.min.js"></script>

第三步:在网页底部放上以下的 JS 代码,用于控制播放速度;

  1. <script>
  2. var certifySwiper = new Swiper('#certify .swiper-container', {
  3. watchSlidesProgress: true,
  4. slidesPerView: 'auto',
  5. centeredSlides: true,
  6. loop: true,autoplay:true,
  7. loopedSlides: 5,
  8. autoplay: true,
  9. navigation: {
  10. nextEl: '.swiper-button-next',
  11. prevEl: '.swiper-button-prev',
  12. },
  13. pagination: {
  14. el: '.swiper-pagination',
  15. //clickable :true,
  16. },
  17. on: {
  18. progress: function(progress) {
  19. for (i = 0; i < this.slides.length; i++) {
  20. var slide = this.slides.eq(i);
  21. var slideProgress = this.slides[i].progress;
  22. modify = 1;
  23. if (Math.abs(slideProgress) > 1) {
  24. modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
  25. }
  26. translate = slideProgress * modify * 260 + 'px';
  27. scale = 1 - Math.abs(slideProgress) / 5;
  28. zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
  29. slide.transform('translateX(' + translate + ') scale(' + scale + ')');
  30. slide.css('zIndex', zIndex);
  31. slide.css('opacity', 1);
  32. if (Math.abs(slideProgress) > 3) {
  33. slide.css('opacity', 0);
  34. }
  35. }
  36. },
  37. setTransition: function(transition) {
  38. for (var i = 0; i < this.slides.length; i++) {
  39. var slide = this.slides.eq(i)
  40. slide.transition(transition);
  41. }
  42.  
  43. }
  44. }
  45.  
  46. })
  47. </script>

这样就可以制作好这种网站图片循环 swiper 横向轮播功能了。

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!