javascript輪播插件的使用(TouchSlide)


插件一:TouchSlide

地址

http://www.superslide2.com/TouchSlide/

簡介

TouchSlide 是純javascript打造的觸屏滑動特效插件,面向手機、平板電腦等移動終端,能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。

使用

參照官方api即可上手使用

注意事項

1、此插件是純js開發,不依賴其他任何js庫
2、此插件只模擬了部分jQeury選擇器(包括"#"、"."、"標簽名稱",用空格隔開),不支持其他選擇器,比如不識別這種'div>p'寫法等等
3、slideCell,此值代表容器對象,這個必須是id對象的值,不能是類名
4、titCell,此值代表導航元素對象或導航元素的包裹層對象。(一般情況下,此值為導航元素對象,比如".hd ul li",但是當'autoPage'這個參數為true時,那么titCell的值則需是導航元素的包裹層對象,比如".hd ul")
5、經測試,可以嵌套使用輪播

6、關於下方"實現方式"中的注意

實現方式

針對輪播的元素,插件會復制最后一個元素添加到第一個位置,復制第一個元素添加到最后一個位置。這樣在左右輪播的時候可以無縫銜接。

注意:由於此復制特性,故在使用時需注意。比如利用id名來js操作時,可能會失效等等,因為它可能會復制出相同id名的元素,從而導致一些意外。

 

 

 

插件二:swiper

地址

http://www.swiper.com.cn/

實現方式

(同上面TouchSlide)

注意事項

1、使用方式和版本相對於,注意

2、多次使用swiper時候,類名的定義,只能在默認的類名基礎上追加,而不能修改,因為原來類名有樣式??比如  <div class="swiper-container mytest1">....</div>等等)??

疑難雜症

1、spaceBetween參數無法使用rem單位來自適應

【解決】該參數可以使用百分數來完美解決,注意加引號 比如,spaceBetween : '2%'

進階知識點

Swiper有方法和屬性,利用實例化出來的對象進行操作,有不可思議的效果。

屬性(暫略,參看手冊)

方法 slideTo()、startAutoplay()...等等,參看手冊

slideTo()

語法:

Swiper對象.slideTo(索引值,切換速度時間,回調函數)

語法詳解:

索引值

  設置想要切換到的索引值,0就是第一個元素

切換速度時間

  單位毫秒。當切換速度時間不為零時,有切換效果,如果不想有切換效果,那么可以直接設置為0

回調函數

  略

舉例

  var mySwiper = new Swiper('.swiper-container',{
  })
  $('#btn').click(function(){
      mySwiper.slideTo(0, 1000, false);//切換到第一個slide,速度為1秒
  })


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM