관리 메뉴

moozi

슬라이더기본 본문

TIS_2017/응용sw_1기

슬라이더기본

moozi 2017. 1. 20. 13:35

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>slider</title>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    <style>

        .animation_canvas  {

                overflow:hidden;

                position:relative;           

                width:600px; height:400px;

            }

    

        /* Slider Panel */

        .slider_panel { width:3000px; position:relative; }

        .slider_image { float:left; width:600px; height:400px; }

        

        /* Control Panel */

        .control_panel  {

            position:absolute; 

            bottom:10px;; 

            left:270px;

            overflow:hidden; 

            color:white;

        }

        

        .dot{

            font-size:30px;

            cursor:pointer;

        }

    </style>

    <script>

        $(document).ready(function () {

            // 슬라이더를 움직여주는 함수

            function moveSlider(index){

                var willMoveLeft = -(index * 600);

                $('.slider_panel').animate({ left: willMoveLeft }, 'slow');

            };

            

            $(".dot").click(function(){

                moveSlider($(this).index());

            });

        });

    </script>

</head>

<body>

   <div class="animation_canvas">

        <div class="slider_panel">

            <img src="img/pic1.jpg" class="slider_image"/>

            <img src="img/pic2.jpg" class="slider_image"/>

            <img src="img/pic3.jpg" class="slider_image"/>

            <img src="img/pic4.jpg" class="slider_image"/>

            <img src="img/pic5.jpg" class="slider_image"/>

        </div>

        

        <div class="control_panel" style="text-align:center">

          <span class="dot">*</span> 

          <span class="dot">*</span> 

          <span class="dot">*</span> 

          <span class="dot">*</span>

          <span class="dot">*</span>

        </div>

    </div>

    

    

</body>

</html>

'TIS_2017 > 응용sw_1기' 카테고리의 다른 글

moozi slider  (0) 2017.01.20
jQuery연습문제02  (0) 2017.01.20
jQuery연습문제01  (0) 2017.01.19
gallery01.html  (0) 2017.01.19
jQuery01.html  (0) 2017.01.19
Comments