运用 CSS3 完成的无缝拼接轮播作用编码

日期:2021-03-02 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

无缝拼接轮播的基本原理图

1 . html的构架 :

<div class="layout">
    <div class="jd_banner">
        <ul class="clearfix">
            <li><a href="#"><img src="images/l1.jpg"></a></li>
            <li><a href="#"><img src="images/l2.jpg"></a></li>
            <li><a href="#"><img src="images/l3.jpg"></a></li>
            <li><a href="#"><img src="images/l4.jpg"></a></li>
            <li><a href="#"><img src="images/l5.jpg"></a></li>
            <li><a href="#"><img src="images/l6.jpg"></a></li>
            <li><a href="#"><img src="images/l7.jpg"></a></li>
            <li><a href="#"><img src="images/l8.jpg"></a></li>
            <li><a href="#"><img src="images/l1.jpg"></a></li>
        </ul>
    </div>
</div>

JavaScript:

/*轮播图*/
function banner() {
    var banner = document.querySelector('.banner');
    /*获得机器设备宽度*/
    var offsetWidth = banner.offsetWidth;
    /*照片器皿*/
    var imageBox = banner.querySelector('ul:first-child');
    /*给照片器皿加上过渡动漫特性*/
    function addTransition() {
        imageBox.style.transition = 'all 0.5s';
        imageBox.style.webkitTransition = 'all 0.5s';
    }
    /*消除照片器皿加上过渡动漫特性*/
    function removeTransition() {
        imageBox.style.transition = 'none';
        imageBox.style.webkitTransition = 'none';
    }
    /*设定X轴精准定位*/
    function setTranslateX(offsetX) {
        imageBox.style.transform = 'translateX(' + offsetX + 'px)';
        imageBox.style.webkitTransform = 'translateX(' + offsetX + 'px)';
    }
    // 界定当今数据库索引
    var index = 1;
    // 全自动轮播
    var timer = setInterval(function () {
        index++;
        addTransition();
        setTranslateX(-index * offsetWidth);
        //同歩设定css
        //最底层多线程实际操作
    }, 2000);
    transVar.transitionEnd(imageBox, function () { //监视每次动漫的完毕
        if (index >= 9) { // 当轮播到第9张的情况下,无缝拼接切换到第1张照片
            index = 1;
            // 消除过渡
            removeTransition();
            //无动漫实际效果的精准定位到第1张照片
            setTranslateX(-index * offsetWidth);
        } 
    });
  }

JavaScript : 监视动漫完毕恶性事件

window.transVar = {};   //界定1个window的全局性目标
//监视css3过渡动漫的完毕恶性事件
transVar.transitionEnd = function(obj,callback){
    if (typeof  obj == 'object'){
        obj.addEventListener('webkitTransitionEnd',function(){  // 适配写法
            callback && callback();  // && 运算符 , 假如callback涵数存在,则启用callback()涵数
        })
        obj.addEventListener('transitionEnd',function(){
            callback && callback();
        })
    }
}

小结 : 在运用CSS3完成无缝拼接轮播时,1刚开始1直在纠结如何保证无缝拼接切换到第1张, 当初有1个较为单纯性的念头

想着在轮播的全过程中,立即分辨是不是到了第9张照片,随后启用removeTransition();撤销过渡 , 随后更改index=1,让它无缝拼接切换到第1张, 正当性我自信心满满认为进行了,却結果却给了我1巴掌!!!!!!

var timer = setInterval(function () {
        index++;
        addTransition();
        setTranslateX(-index * offsetWidth);
        if (index >= 9) {   // 当轮播到第9张时,不启用监视动漫恶性事件,立即撤销过渡情况
            removeTransition();
            index = 1;
            setTranslateX(-index * offsetWidth);
        } 
    }, 2000);

那末….缘故究竟是为何呢 ?

由于 CSS3的过渡是多线程恶性事件, 那时的我如梦初醒,才观念到了自身的青春年少无知.

那末既然是多线程恶性事件, 大家就必须运用监视恶性事件,来监视每次过渡情况完毕的情况下,

随后再分辨当今的下标是不是到了最终1张,

再无动漫情况的切换到第1张.

这便是详细是运用CSS3完成无缝拼接轮播 , 平常多踩坑,随后根据自身科学研究处理,渐渐地的当然而然的就不容易犯这类难题了,前端开发的路漫漫,让大家再次加油!!!!!