北京pk10直播

純js響應式輪播圖

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

 19856  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);
相關插件-幻燈片和輪播圖

簡單實用的全屏輪播

有多重選項,配置迅速,十分實用
  幻燈片和輪播圖
 30579  207

特好看的焦點輪播圖

特好看的焦點輪播圖
  幻燈片和輪播圖
 40393  364

jquery旋轉輪播插件

jquery簡單實用幻燈片輪播插件
  幻燈片和輪播圖
 24237  177

jQuery響應式全屏輪播圖插件

jQuery響應式全屏輪播圖插件,支持移動端觸屏切換。
  幻燈片和輪播圖
 32416  311

討論這個項目(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直播 球探足球即时指数 陕西快乐十分 新浪体育国际 竞猜足球指数 北单比分投注技巧 足球比分下载逛球街1 led体育比分管理软件 快乐飞艇 排列5 幸运农场 天津时时彩 内蒙古快三 二分彩 7星彩 贵州十一选五 重庆快乐十分