[JQuery] image

VScode/JQuery 2022. 9. 9. 15:01

*사용된 이미지

1. 이미지 위에 마우스 올리면 이미지 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll01.html</title>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        // 각 이미지에 마우스가 올라가면 이미지를 다음과 같이 변경
        // 1<->3    2<->4
        $(function(){
            $('img:first').hover(
                function(){$(this).attr('src','images/3.jpg');},
                function(){$(this).attr('src','images/1.jpg');}
            );
            $('img:last').hover(
                function(){$(this).attr('src','images/4.jpg');},
                function(){$(this).attr('src','images/2.jpg');}
            );
        });
    </script>
</head>
<body>
    <img src="images/1.jpg">
    <img src="images/2.jpg">
</body>
</html>

2. prompt로 이용해 숫자를 입력받아 이미지 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll02.html</title>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
// 그림을 클릭하면 숫자 하나를 입력 받아서 
// 입력받은 숫자.jpg 그림으로 이미지 바꿈
        $(function(){
            $('img').click(function(){
                var num=prompt('숫자 입력');
                $('img').attr('src','images/'+num+'.jpg');
            });
        });
    </script>
</head>
<body>
    <img src="images/1.jpg">
</body>
</html>

3. 이미지 슬라이드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll03.html</title>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
// 1초에 한번씩 다음 이미지로 변경함. 
// 이미지 번호는 1~10까지임. 10번이 지나면 1번으로 다시 감.
        $(function(){
            var num=1;
            setInterval(function(){
                $('img').attr('src','images/'+num+'.jpg');
                num++;
                if(num==11) num=1;
            },1000);
        });
    </script>
</head>
<body>
    <img src="images/1.jpg">
</body>
</html>

4. 이미지 슬라이드 중 이미지 위에 마우스를 올리면 이미지 멈춤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll04.html</title>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
// 1초에 한번씩 다음 이미지로 변경함. 
// 이미지 번호는 1~10까지임. 10번이 지나면 1번으로 다시 감.
// 마우스가 그림에 올라가면 타이머가 멈추고 
// 다시 마우스가 그림에서 벗어나면 타이머가 다시 시작함.
        $(function(){
            var num=1;
            var timer;
            $('img').hover(
                function(){
                    window.clearInterval(timer);
                },
                function(){
                    timer=setInterval(function(){
                        $('img').attr('src','images/'+num+'.jpg');
                        num++;
                        if(num==11) num=1;
                    },1000);
                }
            );
            $('img').trigger('mouseleave');
        });
    </script>
</head>
<body>
    <img src="images/1.jpg">
</body>
</html>

5. view 안에 이미지를 나열한 후 left를 이용해 슬라이드 제작

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll05.html</title>
    <style type="text/css">
        #view{position:relative; width:170px; height:255px;border:3px solid blue; left:50px; overflow: hidden;}
        #imgs{position:absolute; width:1700px; height:255px; left:0; top:0; border:1px dashed red;}
    </style>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        // 1초에 한칸(170px)씩 이동. animate를 이용
        // 마우스가 올라가면 이동 멈춤, 마우스가 빠지면 다시 이동
        $(function(){
            var num=1;
            var timer;
            $('#view').hover(
                function(){
                    window.clearInterval(timer);
                },
                function(){
                    timer=setInterval(function(){
                        $('#imgs').animate({left:-170*num},1000);
                        num++;
                        if(num==10) num=0;
                    },1000);
                }
            );
            $('#view').trigger('mouseleave');
        });
    </script>
</head>
<body>
    <div id="view">
        <div id="imgs"><img src="images/1.jpg"><img src="images/2.jpg"><img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg"><img src="images/6.jpg"><img src="images/7.jpg"><img src="images/8.jpg"><img src="images/9.jpg"><img src="images/10.jpg"></div>
    </div>
</body>
</html>

6. 버튼에 번호를 부여해 이미지 이동하기

-리모트 버튼을 css를 이용해서 아래쪽 가운데 위치 해 각 버튼들 가로방향으로 나란히 위치 시킴

-버튼을 클릭하면 해당이미지의 위치로 animate를 이용해서 imgs를 이동시킴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll06.html</title>
    <style type="text/css">
        #view{position:relative; width:600px; height:400px; margin:0 auto; border:1px dashed black; overflow: hidden;}
        #imgs{position: absolute; width:4800px; height:400px; left:0; top:0; border:1px dashed red;}
        img{width:600px; height:400px;}

        #remot{position:relative; width:200px; height:50px; border:2px solid white; margin:0 auto; top:350px; text-align: center;}

        ul{list-style:none; padding:0; margin:0; height:42px; display:inline-block;}
        ul li{float:left; width:14px; height:14px; background:white; border-radius: 50%; 
              margin:18px 4px; font-weight: bold; font-size:70%; line-height:14px; text-align: center; cursor:default;}

        .selected{background: black; color:white;}
        //
    </style>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $('li').click(function(){
                var num=$(this).index();
                var dist=-600*num;
                $('#imgs').animate({left:dist},1000);
                $('li').removeClass('selected')
                $(this).addClass('selected')
            });
        });
    </script>
</head>
<body>
    <div id="view">
        <div id="imgs"><img src="images/Koala.jpg" id="img1"><img src="images/Chrysanthemum.jpg" id="img2"><img src="images/Desert.jpg" id="img3"><img src="images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="images/Tulips.jpg"></div>
        <div id="remot">
            <ul>
                <li>1</li><li>2</li><li>3</li><li>4</li>
                <li>5</li><li>6</li><li>7</li><li>8</li>
            </ul>
        </div>
    </div>
</body>
</html>

7. 좌우버튼 생성해 이미지 이동하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll07.html</title>
    <style type="text/css">
        #view{position:relative; width:600px; height:400px; margin:0 auto; border:1px dashed black; overflow: hidden;}
        #imgs{position: absolute; width:4800px; height:400px; left:0; top:0; border:1px dashed red;}
        img{width:600px; height:400px;}

        #lbutton{position:absolute; left:0; bottom:0; width:50px;height:50px; border-radius:50%; overflow:hidden; 
                 background-image:url("images/ico_movie_171115.png");background-position:-60px -460px;}
        #rbutton{position:absolute; right:0; bottom:0; width:50px; height:50px; border-radius:50%; overflow:hidden; 
                 background-image:url("images/ico_movie_171115.png");background-position:0px -460px;}

        #currentNum{position:absolute; right:0; top:0; width:100px;height:40px; border:1px solid white; 
                    font-size:150%; text-align: right; line-height: 40px; font-weight: bold; padding-right:20px;}
    </style>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            var num=0;
            $('#lbutton').click(function(){
                if(num==0) return;
                else num--;
                $('#imgs').animate({left:-600*num},300);
                $('#currentNum').html(num+1+'/8');
            });
            $('#rbutton').click(function(){
                if(num==7) return;
                else num++;
                $('#imgs').animate({left:-600*num},300);
                $('#currentNum').html(num+1+'/8');
            });
        });
    </script>
</head>
<body>
    <div id="view">
        <div id="imgs"><img src="images/Koala.jpg"><img src="images/Chrysanthemum.jpg"><img src="images/Desert.jpg"><img src="images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="images/Tulips.jpg"></div>

        <div id="lbutton"></div>
        <div id="rbutton"></div>

        <div id="currentNum"></div>
    </div>
</body>
</html>

8. 재생 버튼 생성해 이미지 자동 이동하기

-해당되는 이미지 순서 우측 위쪽에 만들기

-버튼 클릭하면 해당되는 버튼 색상 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageControll08.html</title>
    <style type="text/css">
        #view{position:relative; width:600px; height:400px; margin:0 auto; border:1px dashed black; overflow:hidden;}
        #imgs{position:absolute; width:4800px; height:400px; left:0; top:0; border:1px dashed red; transition:0.3s;}
        img{width:600px; height:400px;}

        #remote{position:relative; width:500px; height:50px; border:1px solid white; margin:0 auto; top:350px;  text-align: center;}
        ul{list-style:none; padding:0; margin:0; display:inline-block;}
        ul li{float:left; width:25px; height:25px; background:white; border-radius: 50%; margin:13px 10px; line-height: 25px; text-align: center; cursor:pointer;}

        #currentNum{position:absolute; right:0; top:0; width:100px; height:40px; border:1px solid white; 
                    font-size:150%; text-align: right; line-height: 40px; font-weight: bold; padding-right:20px;}

        .selected{background:black; color:white; border:1px solid white;}
    </style>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            var num=0;
            var timer;
            var state=false;
            $('li:last').click(function(){
                if(state==false){ // 현재 상태 '수동' 또는 '멈춤'
                    state=true; // 상태변수값 변경
                    timer=setInterval(function(){ // timer 시작
                        num++;
                        if(num>7) num=0;
                        $('#imgs').animate({left:-600*num},300);
                        $('li').removeClass('selected') 
                        $('li').eq(num).addClass('selected'); 
                        // 이미지 번호 서식 변경
                        $('#currentNum').html(num+1+'/8'); 
                        // 현재 이미지 번호 표시
                    },1000);
                    $(this).html('■'); // 자동 버튼 표시 변경
                } else{
                    state=false;
                    window.clearInterval(timer);
                    $(this).html('▶');
                }
            });
        });
    </script>
</head>
<body>
    <div id="view">
        <div id="imgs"><img src="images/Koala.jpg"  id="img1"><img src="images/Chrysanthemum.jpg" id="img2"><img src="images/Desert.jpg" id="img3"><img src="images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="images/Tulips.jpg"></div>
        <div id="remote">
            <ul>
                <li>1</li><li>2</li><li>3</li><li>4</li>
                <li>5</li><li>6</li><li>7</li><li>8</li>
                <li>▶</li>
            </ul>
        </div>
        <div id="currentNum"></div>
    </div>
</body>
</html>

저작자표시

'VScode > JQuery' 카테고리의 다른 글

[JQuery] menu생성, animate (0)	2022.09.09
[JQuery] button, effect (0)	2022.09.09
[JQuery] event (0)	2022.09.09
[JQuery] DOM (0)	2022.09.09
[JQuery] 속성/필터선택자, 배열 (0)	2022.09.09

ABOUT ME

im hippo im hippo

'VScode > JQuery' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'VScode > JQuery' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바