집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3를 사용하여 원활한 캐러셀 기능 구현

CSS3를 사용하여 원활한 캐러셀 기능 구현

不言원래의: 2018-06-25 14:32:152473검색

이 기사에서는 예제 코드를 통해 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(&#39;.banner&#39;);
    /*获取设备宽度*/
    var offsetWidth = banner.offsetWidth;
    /*图片容器*/
    var imageBox = banner.querySelector(&#39;ul:first-child&#39;);
    /*给图片容器添加过渡动画属性*/
    function addTransition() {
        imageBox.style.transition = &#39;all 0.5s&#39;;
        imageBox.style.webkitTransition = &#39;all 0.5s&#39;;
    }
    /*清除图片容器添加过渡动画属性*/
    function removeTransition() {
        imageBox.style.transition = &#39;none&#39;;
        imageBox.style.webkitTransition = &#39;none&#39;;
    }
    /*设置X轴定位*/
    function setTranslateX(offsetX) {
        imageBox.style.transform = &#39;translateX(&#39; + offsetX + &#39;px)&#39;;
        imageBox.style.webkitTransform = &#39;translateX(&#39; + offsetX + &#39;px)&#39;;
    }
    // 定义当前索引
    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 == &#39;object&#39;){
        obj.addEventListener(&#39;webkitTransitionEnd&#39;,function(){  // 兼容写法
            callback && callback();  // && 运算符 , 如果callback函数存在,则调用callback()函数
        })
        obj.addEventListener(&#39;transitionEnd&#39;,function(){
            callback && callback();
        })
    }
}

요약: CSS3는 원활한 캐러셀을 구현합니다. 처음에는 어떻게 하면 원활하게 첫 번째 사진으로 전환할 수 있을까 고민을 했는데요. 처음에는 캐러셀 과정에서 9번째 사진에 도달했는지 직접 확인하고, RemoveTransition(을 호출하면 되는 줄 알았습니다. ); 전환을 취소한 다음 index=1로 변경하여 첫 번째 사진으로 원활하게 전환되도록 했습니다. 완료되었다고 확신하는 순간 뺨을 맞았습니다!!!!!!

var timer = setInterval(function () {
        index++;
        addTransition();
        setTranslateX(-index * offsetWidth);
        if (index >= 9) {   // 当轮播到第9张时,不调用监听动画事件,直接取消过渡状态
            removeTransition();
            index = 1;
            setTranslateX(-index * offsetWidth);
        } 
    }, 2000);

그렇다면….이유는 무엇인가요?

CSS3의 전환은 비동기식 이벤트이기 때문에 그 때 문득 제 젊음과 무지함을 깨달았습니다.

그래서 비동기식 이벤트이기 때문에 우리는 각 이벤트를 모니터링하기 위해 청취 이벤트를 사용합니다. 전환 상태가 끝나면

현재 첨자가 마지막 그림에 도달하는지 확인하고

애니메이션 없이 첫 번째 그림으로 전환합니다.

이것은 완벽한 캐러셀을 구현하기 위해 완전히 CSS3를 사용하는 것입니다. , 일반적으로 더 많은 함정에 들어가고 자신의 연구를 통해 천천히 자연스럽게 해결하면 이런 문제가 발생하지 않을 것입니다. 계속 열심히 노력합시다 !!!!

위 이 글의 전체 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다. 학습에 도움이 되기를 바라며, 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS3를 사용하여 원활한 캐러셀 기능 구현

관련 기사