Language

HTML + CSS/JQuery

JQuery - 이미지 슬라이드 효과

초코렛맛 2024. 7. 10. 11:24

■  이미지 슬라이드 자동 효과

<style>
    .con{
        width: 200px;
        height: 300px;
        /* overflow: hidden; */
    }
    .imgbox{
        
        display: flex;
    }

</style>

<body>
    <div class="con">
        <div class="imgbox">
            <div class="img">
                <img src="https://picsum.photos/id/2/200/300" alt="">
            </div>
            <div class="img">
                <img src="https://picsum.photos/id/20/200/300" alt="">
            </div>
            <div class="img">
                <img src="https://picsum.photos/id/200/200/300" alt="">
            </div>
        </div>
    </div>
</body>    
    

<script>
    let i = 0;
    $(".imgbox").append($(".img").first().clone(true));

    setInterval(
        function(){
            i++;
            $(".imgbox").animate({marginLeft:-$(".img").width()*i},600);
            if(i===$(".img").length-1){
                setTimeout(
                    function(){
                        $(".imgbox").animate({marginLeft:0},0);
                        i=0;
                    }
                ,700);
            }
        }

    ,2000);    


</script>
let i = 0;
$(".imgbox").append($(".img").first().clone(true));

setInterval(
    function(){
        i++;
        $(".imgbox").animate({marginLeft:-$(".img").width()*i},600);
        if(i===$(".img").length-1){
            setTimeout(
                function(){
                    $(".imgbox").animate({marginLeft:0},0);
                    i=0;
                }
            ,700);
        }
    }

,2000);

 



○  마우스 오버시 멈춤

<style>
    .con{
        width: 200px;
        height: 300px;
        overflow: hidden;
    }
    .imgbox{
        
        display: flex;
    }

</style>

<body>
    <div class="con">
        <div class="imgbox">
            <div class="img">
                <img src="https://picsum.photos/id/2/200/300" alt="">
            </div>
            <div class="img">
                <img src="https://picsum.photos/id/20/200/300" alt="">
            </div>
            <div class="img">
                <img src="https://picsum.photos/id/200/200/300" alt="">
            </div>
        </div>
    </div>
    
    


    <script>
        $(function(){
            let i = 0;
            $(".imgbox").append($(".img").first().clone(true));

            let interval = setInterval(slide, 1000);

            function slide() {
                i++;
                $(".imgbox").animate({marginLeft:-$(".img").width()*i}, 600);
                if(i === $(".img").length - 1) {
                    setTimeout(function() {
                        $(".imgbox").animate({marginLeft:0}, 0);
                        i = 0;
                    }, 700);
                }
            }

            $(".imgbox").mouseover(function() {
                clearInterval(interval);
                $(".imgbox").stop(true, true);
            });

            $(".imgbox").mouseout(function() {
                interval = setInterval(slide, 1000);
            });
        }); 


    </script>
</body>

 

 

 

 

 

 

 

 

○ 위로 올라가게

<style>
    .con{
        width: 200px;
        height: 300px;
        overflow: hidden;
    }
    img{
        display: block;
    }

</style>

<body>
    <div class="con">
        <div class="imgbox">
            <div class="img">
                <img src="https://picsum.photos/id/2/200/300" alt="">
            </div>
            <div class="img">
                <img src="https://picsum.photos/id/20/200/300" alt="">
            </div>
            <div class="img">
                <img src="https://picsum.photos/id/200/200/300" alt="">
            </div>
        </div>
    </div>
    
    


<script>
let i = 0;
$(".imgbox").append($(".img").first().clone(true));

setInterval(
    function(){
        i++;
        $(".imgbox").animate({marginTop:-$(".img").height()*i},600);
        if(i===$(".img").length-1){
            setTimeout(
                function(){
                    $(".imgbox").animate({marginTop:0},0);
                    i=0;
                }
            ,700);
        }
    }

,2000);    


</script>
</body>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

■ 버튼 눌렀을때 화면 이동

<style>
    .container{
        width: 200px;
        height: 300px;
        overflow: hidden;
    }
    .imgbox{
        display: flex;
    }
    .fb{
        display: flex;
        gap: 30px;
    }
    .fb > div{
        cursor: pointer;
    }
    .fb > .f{
        width: 30px;
        height: 30px;
        background-color: rebeccapurple;
    }
    .fb > .b{
        width: 30px;
        height: 30px;
        background-color: aquamarine;
    }
</style>
<body>
    <div class="container">        
        <div class="imgbox">
            <div class="item">
                <img src="https://picsum.photos/id/101/200/300" alt="">
            </div>
            <div class="item">
                <img src="https://picsum.photos/id/102/200/300" alt="">
            </div>
            <div class="item">
                <img src="https://picsum.photos/id/103/200/300" alt="">
            </div>
            <div class="item">
                <img src="https://picsum.photos/id/101/200/300" alt="">
            </div>                  
        </div>
        

    </div>
    <div class="fb">
        <div class="b"></div>
        <div class="f"></div>
    </div>
    <script>
        $(function(){
            let i = 0;
            $(".f").click(function(){
                $(".imgbox").stop();
                i++;
                $(".imgbox").animate({marginLeft:-$(".item").width()*i},600);
                if(i===(".item").length-2){
                    i=0;
                    $(".imgbox").animate({marginLeft:-$(".item").width()*i},0);
                }

                
            });
            $(".b").click(function(){
                $(".imgbox").stop();
                if(i===0){
                    i=(".item").length-2;
                    $(".imgbox").animate({marginLeft:-$(".item").width()*i},0);
                }
                i--;
                $(".imgbox").animate({marginLeft:-$(".item").width()*i},600);             
            });
        });
    </script>
</body>

 

 

'HTML + CSS > JQuery' 카테고리의 다른 글

JQuery - 스냅 스크롤 CSS  (0) 2024.07.11
JQuery - 버튼 클릭시 스크롤 이동  (0) 2024.07.10
JQuery - 이미지 페이드 인 아웃  (0) 2024.07.10
JQuery - 팝업창 나오게 하기  (0) 2024.07.10
JQuery - 메뉴바 나오게 하기  (0) 2024.07.10

'HTML + CSS/JQuery'의 다른글

  • 현재글JQuery - 이미지 슬라이드 효과

관련글

티스토리툴바