캐러셀의 스크롤 효과를 얻기 위해 간단한 js 코드를 사용하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

캐러셀의 스크롤 효과를 얻기 위해 간단한 js 코드를 사용하는 방법은 무엇입니까?

藏色散人

풀어 주다： 2018-08-09 16:26:23

원래의

4224명이 탐색했습니다.

홈페이지의 캐러셀 표시는 기본적으로 필수입니다. 그래서 초보자에게는 원본 js를 사용하는 것이 다소 어려울 수 있습니다. 사실 이미지 스크롤을 복잡하게 생각할 필요는 없습니다. js 캐러셀 이미지의 구현 원리는 주로 같은 크기의 이미지를 하나의 열로 병합하는 것으로 이해하면 되지만, 이미지 중 하나만 표시되고 나머지는 숨겨지므로 왼쪽 값을 수정하여 표시되는 이미지가 변경됩니다. 회전식 사진은 몇 초마다 자동으로 슬라이드되어 사진을 차례로 재생하는 효과를 얻습니다. 효과에는 슬라이딩과 점진적인 효과가 있습니다. 슬라이딩 회전식은 사진이 왼쪽에서 오른쪽으로 점차적으로 들어가는 효과입니다. 이미지는 투명도를 기준으로 이미지가 점차적으로 표시되는 효과입니다.

그래서 이 글은 js를 사용하여 이미지 캐러셀과 슬라이딩 효과를 구현하는 방법을 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.

캐러셀 이미지를 구현하기 위한 js의 구체적인 코드 예제는 다음과 같습니다.

    //HTML代码部分
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js实现轮播图原理及示例</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <!--从左向右滑动-->
        <nav>
            <ul id="index">
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul id="img">
                <li><img src="img1.jpg" alt="img1"></li>
                <li><img src="img2.jpg" alt="img2"></li>
                <li><img src="img3.jpg" alt="img3"></li>
                <li><img src="img4.jpg" alt="img4"></li>
                <li><img src="img5.jpg" alt="img5"></li>
            </ul>
        </nav>
    <script src="script.js"></script>
    </body>
    </html>

로그인 후 복사

//css代码部分
*{        margin:0;        padding:0;
    }    nav{        width: 720px;        height: 405px;        margin:20px auto;        overflow: hidden;        position: relative;
    }    #index{        position: absolute;        left:320px;        bottom: 20px;
    
    }    #index li{        width:8px;        height: 8px;        border: solid 1px gray;        border-radius: 100%;        background-color: #eee;        display: inline-block;
    }    #img{        width: 3600px;/*不给宽高无法移动*/
        height: 405px;        position: absolute;/*不定义absolute，js无法设置left和top*/
        z-index: -1;
    }    #img li{        width: 720px;        height: 405px;        float: left;
    }    #index .on{        background-color: black;
    }

로그인 후 복사

//js代码部分
function moveElement(ele,x_final,y_final,interval){//ele为元素对象
        var x_pos=ele.offsetLeft;        var y_pos=ele.offsetTop;        var dist=0;        if(ele.movement){//防止悬停
            clearTimeout(ele.movement);
        }        if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
            return;
        }
        dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
        x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
        
        dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
        y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
        
        ele.style.left=x_pos+&#39;px&#39;;
        ele.style.top=y_pos+&#39;px&#39;;
        
        ele.movement=setTimeout(function(){//分10次移动，自调用10次
            moveElement(ele,x_final,y_final,interval);
        },interval)
    }

로그인 후 복사

참고:

이미지 이동 함수 moveElement()는 이미지의 현재 위치와 대상 위치를 가져와서 사이의 간격을 계산해야 합니다. 이동을 위해 offsetLeft 및 offsetTop을 사용하여 그림의 현재 위치를 얻을 수 있습니다. 이동할 때 그림을 "스와이프"하는 효과는 이동 거리를 10배로 나누는 것, 즉 setTimeOut 함수를 사용하는 것입니다. 그러나 마우스가 호버링되는 것을 방지하려면 ClearTimeout() 함수를 호출해야 합니다. .

【관련 추천글】

좌우 캐러셀 효과를 구현하는 jquery의 자세한 예

캐러셀 효과를 구현하는 CSS3

캐러셀을 쉽게 구현하는 JS

구현하는 두 개의 js 회전목마 효과

위 내용은 캐러셀의 스크롤 효과를 얻기 위해 간단한 js 코드를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!