얼렁뚱땅코드/jquery

얌샘김밥 예제

얼렁뚱땅 디자이너 2019. 10. 22. 20:38 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/reset.css">
    <style>
        .rotateMenu {
            width: 1356px;
            margin: auto;
        }

        .fixedmenu {
            width: 560px;
            margin: auto;
            display: flex;
            border: 1px solid #000;

        }

        .fixedmenu.on {
            /* position: fixed;
            left:50%;
            transform: translateX(-50%);
            top:50px;*/
            z-index: 999;
            position: sticky;
            top: 50px
        }

        .fixedmenu li {
            border-right: 1px solid #000;
            text-align: center;
            background: #fff;
            flex: 1
        }

        .fixedmenu li a {
            display: block;
            padding: 10px;
        }

        .fixedmenu li.on a {

            background: #000;
            color: #fff
        }


        article h3 {
            text-align: center;
            font-size: 30px;
            margin: 30px
        }

        article {
            width: 1360px;
            margin: 100px auto;
            border: 1px solid #000;
        }

        article ul {
            display: flex;
            flex-wrap: wrap;
        }

        article ul li {
            width: 175px;
            height: 175px;
            margin: 25px;
            text-align: center;
            position: relative;
        }

        article ul li a {
            position: absolute;
            bottom: -30px;
            display: block;
            opacity: 1;
        }

        article li b {
            display: block;
        }

        .slide img {
            width: 100%;
        }

        .fadeslide img {
            width: 100%;
        }

        section img {
            vertical-align: top;
        }

        section.fade {
            width: 1920px;
            margin: 0 auto;
            position: relative;
            height: 900px;
        }

        .fadeslide {
            position: absolute;
            display: none;
        }

        .fadeslide.on {
            display: block;
        }

        section.slide {
            width: 1920px;
            margin: 0 auto;
        }

        .pointer {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        .pointer li {
            width: 15px;
            height: 15px;
            background: #fff;
            margin: 10px;
            border-radius: 50%;
        }

        .pointer li.on {
            background: orange;
        }

        a.prev,
        a.next {
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
        }

        a.prev {
            left: 50px;
        }

        a.next {
            right: 50px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="/js/jquery.transit.min.js"></script>
    <!-- https://ricostacruz.com/jquery.transit/ -->
    <script>
        $(function () {
            var len = $('.fadeslide').length
            var i = $('.fadeslide.on').index()
            console.log(len, i)

            $('.pointer li').click(function () {
                i = $(this).index()
                showslide(i)
            })

            $('a.next').click(function (e) {
                e.preventDefault();
                if (i == len - 1) {
                    i = 0
                } else {
                    i += 1
                }

                showslide(i)
            })

            $('a.prev').click(function (e) {
                e.preventDefault();
                if (i == 0) {
                    i = len - 1
                } else {
                    i -= 1
                }
                showslide(i)
            })

            function showslide(index) {
                $('.pointer li').removeClass('on');
                $('.pointer li').eq(index).addClass('on');

                $('.fadeslide').fadeOut();
                $('.fadeslide').eq(index).fadeIn();
            }

        })
    </script>
</head>

<body>
    <section class="slide">
        <img src="main_visual_01.jpg" alt="">
    </section>
    <section class="fade">
        <div class="fadeWrap">
            <div class="fadeslide on"><img src="main_con_visual_02.jpg" alt=""></div>
            <div class="fadeslide"><img src="main_con_visual_03.jpg" alt=""></div>
            <div class="fadeslide"><img src="main_con_visual_04.jpg" alt=""></div>
        </div>
        <ul class="pointer">
            <li class="on"></li>
            <li></li>
            <li></li>
        </ul>
        <a href="#" class="prev"><img src="btn_slide_prev.png" alt=""></a>
        <a href="#" class="next"><img src="btn_slide_next.png" alt=""></a>
    </section>

    <section>
        <div class="rotateMenu">
            <img src="story_data03_visual.png" alt="">
        </div>

    </section>
    <section>
        <h2>얌샘메뉴</h2>
        <p>얌샘신메뉴로 일상의 행복을 채우세요</p>
        <ul class="fixedmenu">
            <li><a href="#menu1">입안가득김밥</a> </li>
            <li><a href="#menu2">한입에쏙 한입김밥</a></li>
            <li><a href="#menu3">인기만점식사</a></li>
            <li><a href="#menu4">취향저격분식</a></li>
        </ul>
        <article id="menu1">
            <h3>입안가득김밥</h3>
            <ul>
                <li><a href=""><img src="img/menu1-1.png" alt=""><b>얌샘김밥</b> </a> </li>
                <li><a href=""><img src="img/menu1-2.jpg" alt=""><b>소세지 김밥</b> </a> </li>
                <li><a href=""><img src="img/menu1-3.png" alt=""><b>치즈김밥</b> </a> </li>
                <li><a href=""><img src="img/menu1-4.png" alt=""><b>봄쥬르계란 김밥</b> </a> </li>
                <li><a href=""><img src="img/menu1-5.png" alt=""><b>대충마라김밥</b> </a> </li>
                <li><a href=""><img src="img/menu1-6.jpg" alt=""><b>참치샐러드 김밥</b> </a> </li>
                <li><a href=""><img src="img/menu1-7.png" alt=""><b>진미채오징어김밥</b> </a> </li>
                <li><a href=""><img src="img/menu1-8.png" alt=""><b>돈까스김밥</b> </a> </li>
                <li><a href=""><img src="img/menu1-9.png" alt=""><b>날치알톡톡 김밥</b> </a> </li>
                <li><a href=""><img src="img/menu1-10.png" alt=""><b>통새우 김밥</b> </a> </li>
                <li><a href=""><img src="img/menu1-11.png" alt=""><b>메가김밥</b> </a> </li>
                <li><a href=""><img src="img/menu1-12.png" alt=""><b>원조김밥</b> </a> </li>

            </ul>
        </article>
        <article id="menu2">
            <h3>한입에쏙 한입김밥</h3>
            <ul>
                <li><a href="#"><img src="img/f1cf4c986.jpg" alt=""><b>한입에 계란</b></a></li>

            </ul>
        </article>
        <article id="menu3">
            <h3>인기만점식사</h3>
            <ul>
                <li><a href="#"><img src="img/menu2-1.jpg" alt=""><b>생등심 돈까스</b> </a> </li>
                <li><a href="#"><img src="img/menu2-2.jpg" alt=""><b>치즈돈까스</b> </a> </li>
                <li><a href="#"><img src="img/menu2-3.png" alt=""><b>함박스테이크</b> </a> </li>
                <li><a href="#"><img src="img/menu2-4.jpg" alt=""><b>오므라이스</b> </a> </li>
                <li><a href="#"><img src="img/menu2-5.jpg" alt=""><b>커리오므라이스</b> </a> </li>
                <li><a href="#"><img src="img/menu2-6.jpg" alt=""><b>돈까스 김치오므라이스</b></a> </li>
                <li><a href="#"><img src="img/menu2-7.png" alt=""><b>참치알밤</b> </a> </li>
                <li><a href="#"><img src="img/menu2-8.png" alt=""><b>스팸계란덮밥</b> </a> </li>
                <li><a href="#"><img src="img/menu2-9.png" alt=""><b>장조림버터비빔밥</b> </a> </li>
                <li><a href="#"><img src="img/menu2-10.png" alt=""><b>낙지덮밥</b> </a> </li>
                <li><a href="#"><img src="img/menu2-11.png" alt=""><b>제육덮밥</b> </a></li>
                <li><a href="#"><img src="img/menu2-12.png" alt=""><b>바싹불고기덮밥</b> </a> </li>
                <li><a href="#"><img src="img/menu2-13.png" alt=""><b>돈까스김치찌개</b> </a> </li>

            </ul>
        </article>
        <article id="menu4">
            <h3>취향저격분식</h3>
            <ul>
                <li><a href="#"><img src="img/menu3-1.jpg" alt=""><b>모다기</b></a></li>
                <li><a href="#"><img src="img/menu3-2.png" alt=""><b>모다기</b></a></li>
                <li><a href="#"><img src="img/menu3-3.png" alt=""><b>라돈모다기</b></a></li>
                <li><a href="#"><img src="img/menu3-4.jpg" alt=""><b>비빔모다기</b></a></li>
                <li><a href="#"><img src="img/menu3-5.jpg" alt=""><b>얌샘라면</b></a></li>
                <li><a href="#"><img src="img/menu3-6.jpg" alt=""><b>치즈라면</b></a></li>
                <li><a href="#"><img src="img/menu3-7.jpg" alt=""><b>짬뽕라면</b></a></li>
                <li><a href="#"><img src="img/menu3-8.jpg" alt=""><b>떡볶이</b></a></li>
                <li><a href="#"><img src="img/menu3-9.jpg" alt=""><b>라볶이</b></a></li>
                <li><a href="#"><img src="img/menu3-10.png" alt=""><b>유부우동</b></a></li>
                <li><a href="#"><img src="img/menu3-11.jpg" alt=""><b>비빔쫄면</b></a></li>
                <li><a href="#"><img src="img/menu3-12.jpg" alt=""><b>물쫄면</b></a></li>
                <li><a href="#"><img src="img/menu3-13.png" alt=""><b>대충마라비빔면</b></a></li>
                <li><a href="#"><img src="img/menu3-14.jpg" alt=""><b>어묵탕(사이<드메뉴)</b> </a> </li> <li><a href="#"><img
                                        src="img/menu3-15.png" alt=""><b>모둠튀김</b></a</li> <li><a href="#"><img
                                            src="img/menu3-16.png" alt=""><b>얌샘감자</b></a></li>
                <li><a href="#"><img src="img/menu3-17.jpg" alt=""><b>물냉면</b></a></li>
                <li><a href="#"><img src="img/menu3-18.jpg" alt=""><b>비빔냉면</b></a</li> <li><a href="#"><img
                                src="img/menu3-19.jpg" alt=""><b>콩국수</b></a></li>
                <li><a href="#"><img src="img/menu3-20.jpg" alt=""><b>냉모밀</b></a></li>
                <li><a href="#"><img src="img/menu3-21.png" alt=""><b>떡만둣국</b></a></li>
            </ul>
        </article>
    </section>


</body>

</html>

 

<script>
        $(function () {
            var len = $('.fadeslide').length
            var i = $('.fadeslide.on').index()
            console.log(len, i)

            $('.pointer li').click(function () {
                i = $(this).index()
                showslide(i)
            })

            $('a.next').click(function (e) {
                e.preventDefault();
                if (i == len - 1) {
                    i = 0
                } else {
                    i += 1
                }

                showslide(i)
            })

            $('a.prev').click(function (e) {
                e.preventDefault();
                if (i == 0) {
                    i = len - 1
                } else {
                    i -= 1
                }
                showslide(i)
            })

            function showslide(index) {
                $('.pointer li').removeClass('on');
                $('.pointer li').eq(index).addClass('on');

                $('.fadeslide').fadeOut();
                $('.fadeslide').eq(index).fadeIn();
            }

        })
    </script>

 

'얼렁뚱땅코드 > jquery' 카테고리의 다른 글

참고사이트 - css easing generator css 애니메이션 부드럽게 쓰기  (0) 2019.10.22
얌샘김밥 자동슬라이드 setInterval 예제  (0) 2019.10.22
왼쪽오른쪽 색 다르게 하기  (0) 2019.10.15
sticky예제_밤도깨비야시장 스크롤 내릴때마다 네비 배경 바꾸기  (0) 2019.10.15
sticky 예제 사용하기_밤도깨비야시장  (0) 2019.10.15

'얼렁뚱땅코드/jquery'의 다른글

  • 현재글얌샘김밥 예제

관련글

댓글

티스토리툴바