首页>>焦点图>>jQuery响应式轮播图片 自适应幻灯片(2019-09-05)

jQuery响应式轮播图片 自适应幻灯片

jQuery响应式轮播图片 自适应幻灯片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="swiper-container">  
  2. <a class="arrow-left" href="#"></a>  
  3. <a class="arrow-right" href="#"></a>  
  4. <div class="swiper-wrapper">  
  5. <div class="swiper-slide slide1">  
  6. <a href="" class="inner">  
  7. <img src="http://www.freejs.net/images/logo.png" class="ani img s0" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0s">  
  8. <img src="images/s1.png" class="ani img s1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">  
  9. <img src="images/s2.png" class="ani img s2" swiper-animate-effect="flipInY" swiper-animate-duration="1s" swiper-animate-delay="0.8s">  
  10. <img src="images/s3.png" class="ani img s3" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay=".2s">  
  11. <img src="images/s4.png" class="ani img s4" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.5s" swiper-animate-delay="0s">  
  12. </a>  
  13. </div>  
  14. <div class="swiper-slide slide2">  
  15. <a href="" class="inner">  
  16. <img src="images/pigBanner_03.png" class="ani img zh-a-1" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s">  
  17. <img src="images/pigBnnaer_1_03.png" class="ani img zh-a-2" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0s">  
  18. </a>  
  19. </div>  
  20. <div class="swiper-slide slide3">  
  21. <div class="inner">  
  22. <img src="images/b-1.png" class="ani img b-1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0s">  
  23. <img src="images/b-2.png" class="ani img b-2" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0s">  
  24. <img src="images/b-3.png" class="ani img b-3" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0s">  
  25. <img src="images/b-s.png" class="ani img b-s-1" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0s">  
  26. <img src="images/b-s.png" class="ani img b-s-2" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0s">  
  27. <img src="images/b-s.png" class="ani img b-s-3" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0.6s">  
  28. <img src="images/b-s.png" class="ani img b-s-4" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0.8s">  
  29. <img src="images/b-s.png" class="ani img b-s-5" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="1.5s">  
  30. <img src="images/b-s.png" class="ani img b-s-6" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay=".5s">  
  31. <img src="images/b-y-1.png" class="ani img b-y-1 loop" swiper-animate-effect="moveRight" swiper-animate-duration="15s" swiper-animate-delay="4s">  
  32. <img src="images/b-y-2.png" class="ani img b-y-2 loop" swiper-animate-effect="moveLeft" swiper-animate-duration="15s" swiper-animate-delay="0s">  
  33. <img src="images/b-y-3.png" class="ani img b-y-3 loop" swiper-animate-effect="moveRight" swiper-animate-duration="15s" swiper-animate-delay="0s">  
  34. <div class="targetBtn clearfix ani" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">  
  35. <a class="a1" href="#">了解更多</a>  
  36. <a class="a2" href="#" style="" rel="media-gallery"><i></i>观看视频介绍</a>  
  37. </div>  
  38. </div>  
  39. </div>  
  40. </div>  
  41. <div class="pagination"></div>  
  42. </div>  

 

JavaScript Code
  1. <script>          
  2. var mySwiper = new Swiper ('.swiper-container', {  
  3.     pagination: '.pagination',  
  4.     paginationClickable :true,  
  5.     autoplay : 10000,  
  6.     speed:1,  
  7.   
  8.     //autoplayDisableOnInteraction : false,  
  9.       
  10.     onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit  
  11.         swiperAnimateCache(swiper); //隐藏动画元素   
  12.         swiperAnimate(swiper); //初始化完成开始动画  
  13.     },   
  14.     onSlideChangeEnd: function(swiper){   
  15.     swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画  
  16.     }   
  17. })  
  18.     
  19. $('.arrow-left').on('click', function(e){  
  20.     e.preventDefault()  
  21.     mySwiper.swipePrev()  
  22. })  
  23. $('.arrow-right').on('click', function(e){  
  24.     e.preventDefault()  
  25.     mySwiper.swipeNext()  
  26. })      
  27. </script>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_815.html