ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。