生活随笔
收集整理的這篇文章主要介紹了
Swiper4.x使用之图片只有一张时不进行轮播，多张才进行轮播
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
回想初學JavaScript時，寫一個圖片的輪播；那是寫得慘不忍睹。現在我們再去寫圖片輪播的話；用Swiper（官網：https://www.swiper.com.cn）分分鐘就弄好了。
但是老大又提新的需求：圖片只有一張時就不進行輪播，多張才進行輪播？
- 分析需求
1. 把圖片路徑存放在數組中， 循環遍歷數組；取出追加到頁面 - 具體實現
1. html代碼
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" /><meta content="yes" name="apple-mobile-web-app-capable"/><meta content="black" name="apple-mobile-web-app-status-bar-style"/><meta name='keywords' content=''/><meta name='description' content=''/><link rel='stylesheet' href='css/layout.css'><link rel='stylesheet' href='css/swiper.css'> <title>test</title></head><body><div class="main"><div class="swiper-container"><!-- 用于計算有幾張照片 --><input type="hidden" id="imgNumber" value=""/><div class="swiper-wrapper" id="topSlides"><!--<div class="swiper-slide"><img src="images/banner.png"></div><div class="swiper-slide"><img src="images/banner.png"></div>--></div><!-- 如果需要分頁器 --><div class="swiper-pagination swiper-pagination-bullets"></div> <!-- 如果需要導航按鈕 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滾動條 --><!--<div class="swiper-scrollbar"></div>--></div><h6><a href="https://www.swiper.com.cn/usage/index.html">Swiper4.x使用方法</a></h6></div></body>
</html>
<script src="js/jquery.1.11.1.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/swiperController.js"></script>
<script>$(function(){var swiper = new Swiper('.swiper-container', {//分頁器pagination: {el: '.swiper-pagination',},// 如果需要前進后退按鈕navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滾動條/*scrollbar: {el: '.swiper-scrollbar',},*/autoplay:{stopOnLastSlide:false }});//獲取隱藏的input標簽中的值var number = $("#imgNumber").val();if(number == 1) {//一張圖片則隱藏錨節點 $(".swiper-pagination-bullets > span").css("display","none");}
});
</script>
JavaScript代碼（swiperController.js）
//圖片滑塊控制器
$(function() {// 設置圖片function setImages(){// var nowHtml = $(".swiper-wrapper").html();var newHtml = "";for (var k = 0; k < images.length; k++) {newHtml += images[k];}$("#topSlides").html(newHtml);$("#imgNumber").val(images.length);//設置圖片數量}//動態設置活動圖片及URLvar images = ['<div class="swiper-slide"><img src="images/banner.png"></div>','<div class="swiper-slide"><img src="images/banner.png"></div>','<div class="swiper-slide"><img src="images/banner.png"></div>'];setImages(); //如需替換默認圖片，調用此方法var imgNumber = $("#imgNumber").val();// 獲取滑塊當前圖片數量if (imgNumber > 1) {// 滾動效果var swiperwflb = new Swiper('.no_lb', {autoplay : 3000,pagination : '.dian',paginationClickable : true,autoplayDisableOnInteraction : false,// 若只有一個的時候不讓左右切換，就將loop的值變為false,若多個需要循環值為：true,loop : true});} else {var swiperwflb = new Swiper('.no_lb', {autoplay : 3000,pagination : '.dian',paginationClickable : true,autoplayDisableOnInteraction : false,// 若只有一個的時候不讓左右切換，就將loop的值變為false,若多個需要循環值為：true,loop : false});}
});
總結
以上是生活随笔為你收集整理的Swiper4.x使用之图片只有一张时不进行轮播，多张才进行轮播的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
