内蒙古十一选五走结果:原生js實現的輪播圖插件

内蒙古十一选五的走势图百度乐彩网 www.cyiqh.com 所屬分類:媒體-幻燈片和輪播圖

分享到微信朋友圈
X
原生js實現的輪播圖插件 ie兼容8

更新時間:2019-12-01 22:35:48

使用方法

1、在頁面引入picture-carousel.min.css和picture-carousel.min.js

<link rel="stylesheet" href="picture-carousel.min.css" />
<script type="text/javascript" src="picture-carousel.min.js"></script>

2、在頁面新建一個div,設置寬度高度

<div id="box"></div>

3、調用生成圖片輪播容器

var box = new PictureCarousel('#box', {
    direction: 'left', //輪播方向:left,right
    interval: 4000, //單位ms,輪播持續時間
    duration: 50, //單位ms,自動切換時間間隔,最佳速度:容器寬度/duration = 25
    autoplay: true, //是否自動播放
    display: 1, //同時顯示的滑塊數量
    arrow: true, //是否顯示左右箭頭
    dots: true, //是否顯示指示點
    listData: [ //插入圖片等的數據
        {
            src: 't1.png',
            alt: '1'
        },
        {
            src: 't2.png',
            alt: '2'
        },
        {
            src: 't3.png',
            alt: '3'
        },
        {
            src: 't4.png',
            alt: '4'
        }
    ]
});
box.init();

4、注意

duration: 這個時間的設置很重要,一般是---容器(如#box所代表的容器)的寬度 / duration = 20左右,商最好保證余數為0。

 所以你可以這樣求值 duration(整數)=容器寬度/20(或上下)。

5、想改動的解壓縮兩個文件自己改吧,都是很簡單的知識

相關插件-幻燈片和輪播圖

jquery仿酷狗官網新聞焦點圖

jquery仿酷狗官網新聞焦點圖,jquery擴展方法,自動切換,可控制時間,簡單易改,效果很炫,適合首頁展示,兼容各大瀏覽器
  幻燈片和輪播圖
 19464  246

jQuery仿騰訊圖片新聞組圖幻燈

jQuery仿騰訊圖片新聞組圖幻燈
  幻燈片和輪播圖
 22006  246

jquery實現圖片瀏覽類似qq空間圖片查看

利用layer.min.js插件進行實現
  幻燈片和輪播圖
 24863  177

jquery+css3立方體自定義生成(原創)

jq+css3矩體自定義生成,可自定義寬高和面的分離量
  幻燈片和輪播圖
 11550  126

討論這個項目(0)回答他人問題或分享插件使用方法獎勵jQ幣 評論用戶自律公約

取消回復