iscroll 가로 방향 슬라이딩 (현재 페이지 상태 표시 자동 변화)

var myScroll;



function loaded(){

    myScroll = new iScroll('wrapper',{

        snap:true,

        checkDOMChanges:true,

        hScrollbar:false,

        vScrollbar:false,

        momentum:false,

        onScrollEnd:function(){

            document.querySelector('.product_nav > span.push').className = 'nav';

            document.querySelector('.product_nav > span:nth-child('  + (this.currPageX+1) + ')').className = 'nav push';

        }

    });

}



$(document).on('DOMContentLoaded', function () { setTimeout(loaded, 200); });

css 섹션 코드는 다음과 같습니다.

<div id='wrapper'>

    <div id='scroller'>

        <ul>

            <li><img src='' /></li>

            <li><img src='' /></li>

            <li><img src='' /></li>

            <li><img src='' /></li>

            <li><img src='' /></li>

            <div style='clear:both;'></div>

        </ul>

    </div>

</div>

<div class='product_nav'>

    <span class='nav push'></span>

    <span class='nav'></span>

    <span class='nav'></span>

    <span class='nav'></span>

    <span class='nav'></span>

</div>

#wrapper의 너비는 내부 그림의 너비로 할 수 있으나overflow:hidden;#scroller의 너비는 한 폭의 그림 너비* 그림 수이며, 리마다float:left가 있어야 합니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

React 및 Sass를 사용한 스마트 Navbar

고정식 또는 고정식 내비게이션 바는 사용자가 웹 애플리케이션이나 웹 사이트를 탐색하기 위해 접근하기 쉬운 액세스를 제공하기 때문에 널리 사용되는 디자인 선택입니다. 그러나 특히 작은 화면에서는 공간을 차지하며 보기 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

iscroll 가로 방향 슬라이딩 (현재 페이지 상태 표시 자동 변화)

좋은 웹페이지 즐겨찾기