北京pk10直播

純js響應式輪播圖

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

 17415  166  查看評論 (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個性化數字焦點圖代碼,底部4個焦點數字編碼,左右展開,同時展開文字說明
  幻燈片和輪播圖
 18122  135

jQuery簡單的輪播圖

用最簡單的最少量的代碼完成輪播任務,無縫,無限循環,自適應窗口大小
  幻燈片和輪播圖
 31677  163

jQuery徑向SVG滑塊輪播

簡單反應迅速的滑塊,與采用 SVG clipPath 和遮罩元素徑向過渡效果。
  幻燈片和輪播圖
 15004  185

jQuery反轉式輪播插件roundabout.js

jQuery反轉式輪播插件roundabout.js簡單好用,兼容ie6
  幻燈片和輪播圖
 4321  46

討論這個項目(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直播