이런 모양의 slide 함수입니다. css는 따로 첨부하지 않겠습니다.



이전 포스팅에 이어서 하는 포스팅입니다.


http://blog.koyeseul.net/538


이전에 만들었던 함수와 다른 점이 있다면, 이전에는 슬라이딩 함수의 위치를 감지해서 순서를 표시해주는 부분만 있었다면, 지금의 함수는 이전/다음으로 가는 화살표가 추가 되었다는 것입니다.


html 표준 문법이 아닌 부분은 Cafe24 기반이기 때문에 들어간 부분입니다.


html 부분


<!-- Yeseul fullwidth slide menu -->

<div class="fullwidthslidemenu001_wrap">

    <div class="fullwidthslidemenu001">

        <!--@js(/han/js/fullwidthslidemenu001.js)-->

        <a class="fleft" href="http://bimilbottari.com/product/detail.html?product_no=4448&cate_no=202&display_group=1"><img src="/web/upload/editor/2015/10/23/8883eadf4e6a884dcf1c5327197be8ad.png"></a>

        <div class="fright">

            <div class="titlearea">

                <h3><img src="/ys_edit/images/main_new00003/embanner004_title.png"></h3>

                <ol class="ys_custom_selector002">

                    <li class="selected"><a href="http://bimilbottari.com/product/detail.html?product_no=4448&cate_no=202&display_group=1"><b></b></a></li><li><a href="#a"><b></b></a></li><li><a href="#a"><b></b></a></li>

                </ol>

            </div>

            <ul class="mainslide">

                <li><a href="http://bimilbottari.com/product/detail.html?product_no=2250&cate_no=51&display_group=1"><img src="/ys_edit/images/main_new00003/embanner004_floating001.png"></a></li>

                <li><a href="http://bimilbottari.com/product/detail.html?product_no=878&cate_no=52&display_group=1"><img src="/web/upload/editor/2015/10/22/a646fe5f44bdb1770670462d91a58e4a.png"></a></li>

                <li><a href="http://bimilbottari.com/product/detail.html?product_no=60&cate_no=449&display_group=1"><img src="/web/upload/editor/2015/10/22/d55bf09f3ca00bcdb5f929615ee4032e.png"></a></li>

                <li><a href="http://bimilbottari.com/product/detail.html?product_no=2531&cate_no=235&display_group=1"><img src="/ys_edit/images/main_new00003/embanner004_floating004.png"></a></li>

                <li><a href="http://bimilbottari.com/product/detail.html?product_no=3127&cate_no=52&display_group=1"><img src="/ys_edit/images/main_new00003/embanner004_floating005.png"></a></li>

                <li><a href="http://www.bimilbottari.com/product/detail.html?product_no=2950&cate_no=202&display_group=1"><img src="/web/upload/editor/2015/10/21/42993136d6ec45143ba81ced02252635.png"></a></li>

                <li><a href="http://www.bimilbottari.com/product/detail.html?product_no=492&cate_no=449&display_group=1"><img src="/web/upload/editor/2015/10/21/9c047590206bcac59d616732a9ba7433.png"></a></li>

                <li><a href="http://www.bimilbottari.com/product/detail.html?product_no=52&cate_no=202&display_group=1"><img src="/web/upload/editor/2015/10/21/f1fdf3b340e6b7ec2a449a152c1d6121.png"></a></li>

                <li><a href="http://www.bimilbottari.com/product/detail.html?product_no=2432&cate_no=235&display_group=1"><img src="/web/upload/editor/2015/10/21/298db98fa935c1de576dfdfd9e5d8656.png"></a></li>

                <li><a href="http://www.bimilbottari.com/product/detail.html?product_no=3822&cate_no=207&display_group=1"><img src="/web/upload/editor/2015/10/22/317dd8a05b41479d9a05947d5c821f8b.png"></a></li>

                <li><a href="http://www.bimilbottari.com/product/detail.html?product_no=2056&cate_no=52&display_group=1"><img src="/web/upload/editor/2015/10/22/b23774228adefb86a4ccdb7c3b5dd604.png"></a></li>

                <li><a href="http://bimilbottari.com/product/detail.html?product_no=2930&cate_no=202&display_group=1"><img src="/web/upload/editor/2015/10/22/d08ed1845b3e16de1baddc53716b6633.png"></a></li>

                <li><a href="http://bimilbottari.com/product/detail.html?product_no=4345&cate_no=51&display_group=1"><img src="/web/upload/editor/2015/10/21/ea554624ec0859d962c50b273b84c152.png"></a></li>

                <li><a href="http://bimilbottari.com/product/detail.html?product_no=4258&cate_no=449&display_group=1"><img src="/web/upload/editor/2015/10/22/7d6a1cd935ab4437ee0e8700fe131e86.png"></a></li>

                <li><a href="http://bimilbottari.com/product/detail.html?product_no=1141&cate_no=50&display_group=1"><img src="/web/upload/editor/2015/10/22/1fd18f8b9f4a2eb76e14924166b16e5e.png"></a></li>

            </ul>

        </div>

        <a class="slide_left_arrow" href="#a"><img src="/ys_edit/images/main_new00003/embanner004_slide_left.png"></a>

        <a class="slide_right_arrow" href="#a"><img src="/ys_edit/images/main_new00003/embanner004_slide_right.png"></a>

    </div>

</div>


js 부분


$(document).ready(function(){

    listswap010();

});


function listswap010(){ // Yeseul 추가 함수

    var listswap001_r_val = 870;

    var $listswap010_r_interval1 = "NULL";

    var listswap001_r_index = 0;

    var $listswap001_r_object = $(".fullwidthslidemenu001 .ys_custom_selector002 li").find(".selected");


    

    $(".fullwidthslidemenu001").mouseenter(function(){

        clearInterval($listswap010_r_interval1);   

        $(this).find(".ys_custom_selector002 li").mouseenter(function(){

            listswap001_r_index = $(this).index();

            $listswap001_r_object = $(this);

            loop_function_listswap001();

        });

        $(this).find(".slide_left_arrow").die('click').live('click',function(){

            //console.log(1);

            listswap001_r_index--;

            if(listswap001_r_index<0){

                listswap001_r_index=2;

            }

            loop_function_listswap001();

        });

        $(this).find(".slide_right_arrow").die('click').live('click',function(){

            //console.log(2);

            listswap001_r_index++;

            if(listswap001_r_index>=3){

                listswap001_r_index=0;

            }

            loop_function_listswap001();

        });

        

        loop_function_listswap001();

    });

    

    $(".fullwidthslidemenu001").mouseleave(function(){

        loop_interval_listswap001();

    });

    

    function loop_interval_listswap001(){

        $listswap010_r_interval1 = setInterval(function(){

            listswap001_r_index++;

            if(listswap001_r_index>=3){

                listswap001_r_index=0;

            }

            loop_function_listswap001();

            


        }, 3500);

    };

    

    function loop_function_listswap001(){

        $listswap001_r_object = $(".fullwidthslidemenu001 .ys_custom_selector002 li").eq( listswap001_r_index );

        

        $(".fullwidthslidemenu001 .ys_custom_selector002 li").removeClass("selected");

        $listswap001_r_object.addClass("selected");

        

        $(".fullwidthslidemenu001 .mainslide").stop().animate({

            left : -1 * listswap001_r_index * listswap001_r_val

        },800);

        

    };

    

    loop_interval_listswap001();


여러분께 도움이 많이 되었으면 좋겠군요.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바