北京pk10直播

純js響應式輪播圖

所屬分類:媒體-幻燈片和輪播圖

 19855  190  查看評論 (8)
分享到微信朋友圈
X
純js響應式輪播圖 ie兼容10

純js寫的輪播圖

// 屏幕的寬度
var width = document.body.offsetWidth;
//統一高度,寬高比例可根據ui修改,目前寬高比例為2.75
document.querySelector(".banner_images li img").style.height = width / 2.75 + "px"
for (var j = 1; j <= document.querySelectorAll(".banner_images li").length - 1; j++) {
    document.querySelector(".banner_index-frame").appendChild(document.createElement("li"));
    document.querySelectorAll(".banner_images li img")[j].style.height = width / 2.75 + "px"
}

// 抽取的代碼 提升代碼的可讀性,以及 降低維護的難度
//開啟過渡效果
var startTransition = function() {
    moveUl.style.transition = 'all .5s';
}

//關閉過渡效果
var endTransition = function() {
    moveUl.style.transition = '';
}

// 開啟定時器
var timeId = setInterval(function() {
    // 累加
    index++;
    if (index >= document.querySelectorAll(".banner_images li").length) {
        index = 0
    }
    // 將 過渡開啟 
    // moveUl.style.transition = 'all .3s';
    startTransition();

    // 修改 ul的位置
    // moveUl.style.transform = 'translateX('+index*width*-1+'px)';
    setTransform(index * width * -1);

}, 3000);
相關插件-幻燈片和輪播圖

jQuery滑動式圖片輪播效果

jQuery滑動式圖片輪播效果兼容ie6
  幻燈片和輪播圖
 27279  157

自制炫酷的圖片輪換效果插件

自制炫酷的圖片輪換效果 響應式,自適應
  幻燈片和輪播圖
 23211  187

js弧形輪播圖插件

js很酷的弧形輪播圖插件
  幻燈片和輪播圖
 22338  173

仿UC輪播插件imgSlider.js

js圖片輪播幻燈片制作UC瀏覽器官網焦點圖片切換,通過鼠標點擊縮略圖切換banner大圖,帶左右按鈕控制縮略圖片滾動切換,進行圖片自動輪播
  幻燈片和輪播圖
 19116  195

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

    阿溴- 0
    2019/6/26 14:50:08
    . 0
    2019/4/12 15:13:29
    哈哈哈哈哈哈哈哈哈哈或或
        鮮果0
        2019/6/20 15:11:11
        嗯呢
    回復
    囊囊 0
    2018/9/25 10:42:07
    這個特效很好 不錯!
        ?0
        2018/9/25 17:11:45
        你用了嗎
    回復
    hammermax 0
    2018/9/17 15:45:13
    這個看起來真的厲害 回復
    青云直上 0
    2018/9/10 11:07:16
    厲害啊厲害啊厲害啊厲害啊厲害啊厲害啊厲害啊
        小璐兒0
        2018/9/12 13:59:34
        很厲害啊
    回復
取消回復
北京pk10直播 体彩p3 北单比分两场延期怎么算 163即时比分 足球直播欧冠 首席球探 bet007网球比分 2012足球比分 电竞比分网esports 7m篮球比分比分直播 江苏快三 快乐时时彩 广东时时彩 山东时时彩 幸运赛车 大乐透 黑龙江十一选五