這次帶給大家如何實現swiper自動圖片無限輪播,實現swiper自動圖片無限輪播的注意事項有哪些,下面就是實戰案例,一起來看一下。
完整程式碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper/css/swiper-3.4.2.min.css" rel="external nofollow" > <script src="swiper/js/swiper-3.4.2.min.js"></script> <style type="text/css"> .swiper-container { width: 900px; height: 300px; } </style> </head> <body> <p class="swiper-container"> <p class="swiper-wrapper"> <p class="swiper-slide box1"><img src="img/a.jpg"></p> <p class="swiper-slide box2" ><img src="img/b.jpg"></p> <p class="swiper-slide box3"><img src="img/c.jpg"></p> </p> <!-- 如果需要分页器 --> <p class="swiper-pagination"></p> <!-- 如果需要导航按钮 --> <p class="swiper-button-prev"></p> <p class="swiper-button-next"></p> <!-- 如果需要滚动条 --> <!--<p class="swiper-scrollbar"></p>--> </p> </p> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', autoplay : 1000, speed:100, // 如果需要滚动条 // scrollbar: '.swiper-scrollbar', effect : 'coverflow', slidesPerView: 3, centeredSlides: true, coverflow: { rotate: 30, stretch: 10, depth: 60, modifier: 2, slideShadows : true } }) </script> </body> </html>
如何使用swiper寫輪播
之前大家都寫過輪播圖吧,相信在寫輪播圖的過程中也因為當中的某些細節煩惱過吧,接下來我要跟大家講述一個方便快速的輪播圖吧!
Swiper常用於行動網站的內容觸控滑動
1.第一步先引入css---swiper.css外掛程式和JQ---swiper.js 外掛程式,
然後呢就開始寫輪播圖了
<p class="swiper-container">--首先定义一个容器 <p class="swiper-wrapper"> <p class="swiper-slide"><img src="" /></p> --添加图片 <p class="swiper-slide"><img src="" /></p> <p class="swiper-slide"><img src="" /></p> </p> <p class="swiper-pagination"></p>--小圆点分页器 <p class="swiper-button-prev"></p>--上一页 <p class="swiper-button-next"></p>--下一页 </p>
如果想讓它動起來,那就繼續來寫js吧
var mySwiper = new Swiper(".swiper-container",{ autoplay:1000,--每秒中轮播一次 loop:true,--可以让图片循环轮播 autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播 pagination:".swiper-pagination",--让小圆点显示 paginationClickable:true,--实现小圆点点击 prevButton:".swiper-button-prev",--实现上一页的点击 nextButton:".swiper-button-next",--实现下一页的点击 effect:"flip"--可以实现3D效果的轮播 })
Swiper輪播的也有它的好處:
1.Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等行動終端。
2.Swiper能實現觸控焦點圖、觸控螢幕Tab切換、觸控螢幕多圖切換等常用效果。
3.Swiper開源、免費、穩定、使用簡單、功能強大,是架構行動終端網站的重要選擇!
同時也有不足之處:(使用Swiper輪播插件ajax請求載入圖片時,無法滑動的問題)
因為banner圖是動態創建的,在插件開始初始化時,文檔流中沒用圖片,所以沒有建立對應寬度,透過調整js載入順序,問題還是沒有解決。
最後找到swiper外掛 api 有屬性是可以依內容變動,自動初始化外掛程式的,加入observer:true後問題解決!
var mySwiper = new Swiper ('.swiper-container', { pagination: '.swiper-pagination', autoplay: 5000, loop: true, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper })
Swiper擁有豐富的API介面。 (不過關於中文文件不多,沒找。)能讓開發者產生個人獨有的分頁器(pagination),上下滑區塊的按鈕
以及4個回呼函數 :1.onTouchStart
2.onTouchMove
3.onTouchEnd## 3.onTouchEnd## 4
以上內容是我個人總結,希望對各位有幫助!
swiper輪播圖(逆向自動切換類似於無限迴圈)
swiper外掛程式輪播圖,預設的輪播循序是會從右向左,第一張,第二張,第三張,然後肉眼可見是的從第三張從左到右倒回第一張,這樣就會有些視覺體驗不高,#,不過還是能夠用swiper本身的特性改變成無限循環的輪播的。 HTML程式碼<p class="course-banner-box"> <p class="swiper-container"> <p class="swiper-wrapper"> <!--四张轮播图--> <p class="swiper-slide slide1"></p> <p class="swiper-slide slide2"></p> <p class="swiper-slide slide3"></p> <p class="swiper-slide slide4"></p> </p> <!-- Add Pagination --> <p class="swiper-pagination"></p> <!-- Add Arrows --> <p class="button-box"> <p class="button"> <!--左右按钮--> <p class="swiper-button-next"></p> <p class="swiper-button-prev"></p> </p> </p> </p> </p>script程式碼
<script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination',//pagination分页器 nextButton: '.swiper-button-next',//前进后退按钮 prevButton: '.swiper-button-prev', paginationClickable: true,//参数设置为true时,点击分页器的指示点分页器会控制Swiper切换 spaceBetween: 30,//slide之间的距离(单位px)。 centeredSlides: true,//设定为true时,活动块会居中,而不是默认状态下的居左。 loop : true,//复制多份循环(这里就是让轮播看起来是循环的,去掉这个就恢复了默认的swiper轮播) autoplay: 3000,//自动切换的时间间隔(单位ms),不设定该参数slide不会自动切换。 autoplayDisableOnInteraction: false//点击后打断auto-play }); </script>相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀: ################################################################# ###
以上是如何實現swiper自動圖片無限輪播的詳細內容。更多資訊請關注PHP中文網其他相關文章!