CSS3を利用してシームレスなカルーセル機能を実現

この記事では、CSS3 に基づいたシームレスなカルーセル効果をサンプルコードを通して紹介します。コードはシンプルで理解しやすく、参考になります。

シームレスなカルーセルの概略図です。

1. HTML 構造:

<p class="layout">
    <p 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>
    </p>
</p>

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();
            //无动画效果的定位到第一张图片
            setTranslateX(-index * offsetWidth);
        } 
    });
  }

JavaScript: アニメーション終了イベントをリッスンします

window.transVar = {};   //定义一个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 はシームレスなカルーセルを実装しています。最初に最初の画像にシームレスに切り替える方法に苦労していました。最初は比較的単純なアイデアを持っていました。カルーセルのプロセス中に 9 番目の画像に到達したかどうかを直接判断してから、removeTransition() を呼び出すことを考えていました。 ); トランジションをキャンセルしてから、index=1 を変更して、最初の画像にシームレスに切り替わるようにしました。

それで…。その理由は何でしょうか?

CSS3 の移行は非同期イベントなので、その時突然、自分の若さと無知を実感しました。

だから、非同期イベントなので、リスニング イベントを使用して各イベントを監視します。遷移状態が終了すると、

は現在の添字が最後の添字

に到達したかどうかを判断し、アニメーションなしで最初の添字に切り替えます

これは、CSS3 の完全な使用法です。シームレスなカルーセルを実現するには、通常、より多くの落とし穴に足を踏み入れて、ゆっくりと自然にこのような問題は発生しません。引き続き頑張ってください。

上記はこの記事の全内容です。学習が役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

CSS3を使用してランタン効果を実現します

CSSを使用して背景画像を使用したナビゲーションメニューを作成するというアイデアについて

それを実現するためのCSS3の使用方法マウスが中に入ると、現在のライトが変化し、他の変化が現れます

。

以上がCSS3を利用してシームレスなカルーセル機能を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。