티스토리 뷰

웹디자인

슬라이드 자동이동 및 화살표 클릭시 옆으로 이동

깽아네 2018. 12. 11. 16:00
728x90

안녕하세요. 오늘은 자동으로 이미지가 슬라이드 되면서 화살표를 클릭시 옆으로 이동하는 이미지 배너소스를 알려드릴께요.

 

 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  6.         <style type="text/css">
  7.         .con_mini {width:100%; height:622px; background:url("../images/radger_mini05.jpg") no-repeat center center;}    
  8.         .con_bb {width:1200px; height:360px; margin:0 auto; padding-top:180px; overflow: hidden; position:relative; }
  9.         .left {float:left; width:50px; margin-top:110px;}
  10.         .right {float:right; width:50px; margin-top:110px;}
  11.         .rolling_panel {float:left;  position: relative; width: 1100px; height: 320px; margin: 0; padding: 0; overflow: hidden; }
  12.         .rolling_panel ul { position: absolute; margin: 5px; padding: 0; list-style: none; }
  13.         .rolling_panel ul li { float: left; width: 360px; height: 320px;}
  14.         </style>
  15.     </head>
  17.     <body>
  18.       <div class="con_s">
  19.         <div class="con_bb">
  20.           <div class="left"><a href="javascript:void(0)" id="prev"><img src="/images/btn_left1.png"></a></div>
  22.           <div class="rolling_panel">
  23.               <ul>
  24.                   <li><img src="/images/sl01.png" alt="거치대"></li>
  25.                   <li><img src="/images/sl02.png" alt="mg이어폰이어셋"></li>
  26.                   <li><img src="/images/sl03.png" alt="유선이어폰"></li>
  27.                   <li><img src="/images/sl04.png" alt="ppt버튼"></li>
  28.                   <li><img src="/images/sl05.png" alt="주먹마이크"></li>
  29.               </ul>
  30.           </div>
  31.           <div class="right"><a href="javascript:void(0)" id="next"><img src="/images/btn_right2.png"></a></div>
  32.         </div>
  33.    </div>
  36.         <script type="text/javascript">
  37.             $(document).ready(function() {
  38.                 var $panel = $(".rolling_panel").find("ul");
  39.                 var itemWidth = $panel.children().outerWidth(); // 아이템 가로 길이
  40.                 var itemLength = $panel.children().length;      // 아이템 수
  41.                 // Auto 롤링 아이디
  42.                 var rollingId;
  43.                 auto();
  44.                 // 배너 마우스 오버 이벤트
  45.                 $panel.mouseover(function() {
  46.                     clearInterval(rollingId);
  47.                 });
  48.                 // 배너 마우스 아웃 이벤트
  49.                 $panel.mouseout(function() {
  50.                     auto();
  51.                 });
  52.                 // 이전 이벤트
  53.                 $("#prev").on("click", prev);
  54.                 $("#prev").mouseover(function(e) {
  55.                     clearInterval(rollingId);
  56.                 });
  57.                 $("#prev").mouseout(auto);
  58.                 // 다음 이벤트
  59.                $("#next").on("click", next);
  60.                 $("#next").mouseover(function(e) {
  61.                     clearInterval(rollingId);
  62.                 });
  63.                 $("#next").mouseout(auto);
  64.                 function auto() {
  65.                     // 2초마다 start 호출
  66.                     rollingId = setInterval(function() {
  67.                         start();
  68.                    }, 2000);
  69.                 }
  70.                 function start() {
  71.                     $panel.css("width", itemWidth * itemLength);
  72.                     $panel.animate({"left": - itemWidth + "px"}, function() {
  73.                         // 첫번째 아이템을 마지막에 추가하기
  74.                         $(this).append("<li>" + $(this).find("li:first").html() + "</li>");
  75.                         // 첫번째 아이템을 삭제하기
  76.                         $(this).find("li:first").remove();
  77.                         // 좌측 패널 수치 초기화
  78.                         $(this).css("left", 0);
  79.                     });
  80.                 }
  81.                 // 이전 이벤트 실행
  82.                 function prev(e) {
  83.                     $panel.css("left", - itemWidth);
  84.                     $panel.prepend("<li>" + $panel.find("li:last").html() + "</li>");
  85.                     $panel.animate({"left": "0px"}, function() {
  86.                         $(this).find("li:last").remove();
  87.                    });
  88.                 }
  89.                 // 다음 이벤트 실행
  90.                 function next(e) {
  91.                     $panel.animate({"left": - itemWidth + "px"}, function() {
  92.                         $(this).append("<li>" + $(this).find("li:first").html() + "</li>");
  93.                         $(this).find("li:first").remove();
  94.                         $(this).css("left", 0);
  95.                     });
  96.                 }
  97.             });
  98.         </script>
        </body>
    </html>
728x90
저작자표시 비영리 동일조건

'웹디자인' 카테고리의 다른 글

이미지 클릭시 오버시 다른 이미지로 변경하는 소스  (0) 2018.12.21
이미지 클릭시 큰 이미지 팝업 뜨면서 보이도록 하는 소스  (0) 2018.12.12
탭 클릭시 페이지 안에서 스크롤 이동되는 소스  (0) 2018.12.07
텝 클릭시 하단 이미지 변경되는 css  (0) 2018.12.06
absolute 가운데 정렬하는 css  (0) 2018.12.06