JIWON'S DEV

자격증/웹디자인기능사

slide

dev_jiwon 2022. 6. 21.

fadeIn slide

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li,
        ol {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        #slidewrap {
            width: 1000px;
            height: 350px;
            margin: 50px auto;
            position: relative;
        }

        .slide {
            width: 100%;
        }

        .slide>li {
            width: 100%;
            height: 350px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .slide>li>img {
            width: 100%;
            height: 100%;
        }

        .slide li:not(:first-child) {
            display: none;
        }

        p {
            width: 350px;
            height: 60px;
            line-height: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            background-color: #fff;
            opacity: 0.8;
            border-radius: 10px;
        }
    </style>

    <script>
        var i = 0;

        function slide(){
            i++;
            if(i>$('.slide li:last').index()){
                i=0;
            }
            $(".slide li").eq(i).stop().fadeIn('slow');
            $(".slide li").eq(i-1).stop().fadeOut();
        }

        setInterval(slide, 3000);
    </script>
</head>

<body>
    <div id="slidewrap">
        <ul class="slide">
            <li><img src="https://images.unsplash.com/photo-1575721697801-937774cc44ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
                    alt="slide image"></li>
            <li><img src="https://images.unsplash.com/photo-1503197979108-c824168d51a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&auto=format&fit=crop&w=1491&q=80 "
                    alt="slide image"></li>
            <li><img src="https://images.unsplash.com/photo-1507496380922-d75b080daf03?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=8"
                    alt="slide image"></li>
        </ul>

        <p>Slide Image Text!</p>
    </div>
</body>

</html>


left - animation Slide

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>left-animationSlide</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul, li, ol{
            list-style: none;
        }

        #slidewrap{
            width: 1000px;
            height: 350px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .slide{
            width: 3000px;
        }
        
        .slide>li{
            width: 1000px;
            height: 350px;
            float: left;
        }

        .slide>li>img{
            width: 100%;
            height: 100%;
        }

        p{
            width: 350px;
            height: 60px;
            line-height: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            background-color: #fff;
            opacity: 0.8;
            border-radius: 10px;
        }
    </style>

    <script>
        function slide(){
            $('.slide').stop().animate({marginLeft: -1000}, function(){
                $(".slide li:first").appendTo('.slide');
                $(".slide").css({marginLeft: 0});
            });
        }

        setInterval(slide, 3000);
    </script>
</head>
<body>
    <div id="slidewrap">
        <ul class="slide">
            <li><img src="https://images.unsplash.com/photo-1575721697801-937774cc44ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="slide image"></li>
            <li><img src="https://images.unsplash.com/photo-1503197979108-c824168d51a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&auto=format&fit=crop&w=1491&q=80 " alt="slide image"></li>
            <li><img src="https://images.unsplash.com/photo-1507496380922-d75b080daf03?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=8" alt="slide image"></li>
        </ul>

        <p>왼쪽으로 이동하는 이미지 슬라이드</p>
    </div>
</body>
</html>


right - animation Slide

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>left-animationSlide</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul, li, ol{
            list-style: none;
        }

        #slidewrap{
            width: 1000px;
            height: 350px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .slide{
            width: 3000px;
        }
        
        .slide>li{
            width: 1000px;
            height: 350px;
            float: left;
        }

        .slide>li>img{
            width: 100%;
            height: 100%;
        }

        p{
            width: 350px;
            height: 60px;
            line-height: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            background-color: #fff;
            opacity: 0.8;
            border-radius: 10px;
        }
    </style>

    <script>
        function slide(){
            $('.slide li:last').prependTo('.slide');
            $('.slide').css({marginLeft: -1000});
            $('.slide').animate({marginLeft:0});
        }

        setInterval(slide, 3000);
    </script>
</head>
<body>
    <div id="slidewrap">
        <ul class="slide">
            <li><img src="https://images.unsplash.com/photo-1575721697801-937774cc44ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="slide image"></li>
            <li><img src="https://images.unsplash.com/photo-1503197979108-c824168d51a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&auto=format&fit=crop&w=1491&q=80 " alt="slide image"></li>
            <li><img src="https://images.unsplash.com/photo-1507496380922-d75b080daf03?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=8" alt="slide image"></li>
        </ul>

        <p>오른쪽으로 이동하는 이미지 슬라이드</p>
    </div>
</body>
</html>



up - animation Slide

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>up-animationSlide</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul, li, ol{
            list-style: none;
        }

        #slidewrap{
            width: 1000px;
            height: 350px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .slide{
            width: 1000px;
        }
        
        .slide>li{
            width: 1000px;
            height: 350px;
            float: left;
        }

        .slide>li>img{
            width: 100%;
            height: 100%;
        }

        p{
            width: 350px;
            height: 60px;
            line-height: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            background-color: #fff;
            opacity: 0.8;
            border-radius: 10px;
        }
    </style>

    <script>
        function slide(){
            $('.slide').animate({marginTop: -350}, function(){
                $('.slide li:first').appendTo('.slide');
                $('.slide').css({marginTop: 0});
            });
        }

        setInterval(slide, 3000);
    </script>
</head>
<body>
    <div id="slidewrap">
        <ul class="slide">
            <li><img src="https://images.unsplash.com/photo-1575721697801-937774cc44ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="slide image"></li>
            <li><img src="https://images.unsplash.com/photo-1503197979108-c824168d51a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&auto=format&fit=crop&w=1491&q=80 " alt="slide image"></li>
            <li><img src="https://images.unsplash.com/photo-1507496380922-d75b080daf03?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=8" alt="slide image"></li>
        </ul>

        <p>위로 이동하는 이미지 슬라이드</p>
    </div>
</body>
</html>



down - animation Slide

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>up-animationSlide</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul, li, ol{
            list-style: none;
        }

        #slidewrap{
            width: 1000px;
            height: 350px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .slide{
            width: 1000px;
        }
        
        .slide>li{
            width: 1000px;
            height: 350px;
            float: left;
        }

        .slide>li>img{
            width: 100%;
            height: 100%;
        }

        p{
            width: 350px;
            height: 60px;
            line-height: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            background-color: #fff;
            opacity: 0.8;
            border-radius: 10px;
        }
    </style>

    <script>
        function slide(){
            $('.slide li:last').prependTo('.slide');
            $('.slide').css({marginTop: -350});
            $('.slide').animate({marginTop: 0});
        }

        setInterval(slide, 3000);
    </script>
</head>
<body>
    <div id="slidewrap">
        <ul class="slide">
            <li><img src="https://images.unsplash.com/photo-1575721697801-937774cc44ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="slide image"></li>
            <li><img src="https://images.unsplash.com/photo-1503197979108-c824168d51a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&auto=format&fit=crop&w=1491&q=80 " alt="slide image"></li>
            <li><img src="https://images.unsplash.com/photo-1507496380922-d75b080daf03?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=8" alt="slide image"></li>
        </ul>

        <p>위로 이동하는 이미지 슬라이드</p>
    </div>
</body>
</html>


button Slide

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button Slide</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li,
        ol {
            list-style: none;
        }

        #slidewrap {
            width: 1000px;
            height: 350px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .slide {
            width: 3000px;
        }

        .slide li {
            width: 1000px;
            height: 350px;
            float: left;
        }

        .slide li img {
            width: 100%;
            height: 100%;
        }

        p {
            width: 350px;
            height: 60px;
            line-height: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            background-color: #fff;
            opacity: 0.8;
            border-radius: 10px;
        }

        span {
            position: absolute;
            top: 50%;
            display: block;
            font-size: 38px;
            color: #fff;
            line-height: 40px;
            background-color: rgba(0, 0, 0, 0.6);
            cursor: pointer;
            height: 50px;
            transform: translateY(-50%);
        }

        span:hover {
            background-color: rgba(255, 255, 255, 0.8);
            color: #000;
        }

        .prev {
            left: 0;
            border-radius: 0 10px 10px 0;
            padding: 0 8px 0 2px;
        }

        .next {
            right: 0;
            border-radius: 10px 0 0 10px;
            padding: 0 2px 0 8px;
        }
    </style>

</head>

<body>
    <div id="slidewrap">
        <ul class="slide">
            <li>
                <img src="https://images.unsplash.com/photo-1575721697801-937774cc44ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
                    alt="slide image">
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1503197979108-c824168d51a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&auto=format&fit=crop&w=1491&q=80"
                    alt="slide image">
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1507496380922-d75b080daf03?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80"
                    alt="slide image">
            </li>
        </ul>
        <p>이전, 다음 버튼으로 제어하는 슬라이드</p>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>

    <script>
        $('.prev').click(function () {
            $('.slide li:last').prependTo('.slide');
            $('.slide').css({marginLeft: -1000});
            $('.slide').stop().animate({ marginLeft: 0 }, 800);
        });

        $('.next').click(function () {
            $('.slide').stop().animate({ marginLeft: -1000 }, 800, function () {
                $('.slide li:first').appendTo('.slide');
                $('.slide').css({ marginLeft: 0 });
            });
        });
    </script>
</body>

</html>





button auto Slide

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button Slide</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li,
        ol {
            list-style: none;
        }

        #slidewrap {
            width: 1000px;
            height: 350px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .slide {
            width: 3000px;
        }

        .slide li {
            width: 1000px;
            height: 350px;
            float: left;
        }

        .slide li img {
            width: 100%;
            height: 100%;
        }

        p {
            width: 350px;
            height: 60px;
            line-height: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            background-color: #fff;
            opacity: 0.8;
            border-radius: 10px;
        }

        span {
            position: absolute;
            top: 50%;
            display: block;
            font-size: 38px;
            color: #fff;
            line-height: 40px;
            background-color: rgba(0, 0, 0, 0.6);
            cursor: pointer;
            height: 50px;
            transform: translateY(-50%);
        }

        span:hover {
            background-color: rgba(255, 255, 255, 0.8);
            color: #000;
        }

        .prev {
            left: 0;
            border-radius: 0 10px 10px 0;
            padding: 0 8px 0 2px;
        }

        .next {
            right: 0;
            border-radius: 10px 0 0 10px;
            padding: 0 2px 0 8px;
        }
    </style>

</head>

<body>
    <div id="slidewrap">
        <ul class="slide">
            <li>
                <img src="https://images.unsplash.com/photo-1575721697801-937774cc44ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
                    alt="slide image">
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1503197979108-c824168d51a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&auto=format&fit=crop&w=1491&q=80"
                    alt="slide image">
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1507496380922-d75b080daf03?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80"
                    alt="slide image">
            </li>
        </ul>
        <p>이전, 다음 버튼으로 제어하는 슬라이드</p>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>

    <script>
        function prev() {
            $('.slide li:last').prependTo('.slide');
            $('.slide').css({ marginLeft: -1000 });
            $('.slide').stop().animate({ marginLeft: 0 }, 800);
        }

        function next() {
            $('.slide').stop().animate({ marginLeft: -1000 }, 800, function () {
                $('.slide li:first').appendTo('.slide');
                $('.slide').css({ marginLeft: 0 });
            });
        }

        setInterval(next, 3000);

        $('.prev').click(function(){
            prev();
        });

        $('.next').click(function(){
            next();
        });
    </script>
</body>

</html>




★그림으로 알아보기★
left-slide / right-slide




up-slide / down-slide

 

저작자표시 비영리

'자격증 > 웹디자인기능사' 카테고리의 다른 글

popup / modal / tab  (0) 2022.06.22
웹디자인기능사 실기 - menu 모음  (0) 2022.06.17

댓글

티스토리툴바