FRONT END/jquery

연속된 이미지 슬라이드로 보여주기

자코린이 2023. 6. 20. 16:57
function getImg(){
              var param = {};
              $.ajax({
              url: "",
              data: param,
              type: 'get',
              success: function (data) {
                
              var result = eval(data);
              var str = '';
              console.log(result[0]);
              $.each(result, function (i) {
              str += '<li id="img'+ i +'"><img src="../uploadImg/'+ result[i]["IMG_NAME"] +'"/></li>';
              
              });
              
              //사진나오는 곳의 전체 div css
              
              $(".video").empty();
              //console.log(str);
              $(".video").append(str);
              // console.log(str);

              //사진 imgid넣는 곳의 css
              $("#slide li").css({

                

                "top":"0",

                "left":"0",

                //절대 건들면 안되는 곳
                "display":"none",

                "-webkit-display":"block"

              });

              $("#slide img").css({

                "width":"100%",
                "height": "auto"

              });
              
              $(document).ready(function(){
                imgslide();
              }); 
              
              },
              error: function () {
              
              alert("이미지를 가져오지 못했습니다.");
              }
              });
              
              }

              function imgslide(params) {
              $val = $("#slide").attr("val"); //현재 이미지 번호를 가져옵니다

              $mx = $("#slide").attr("mx"); //총 이미지 개수를 가져옵니다

              $("#img"+$val).hide(); //현재 이미지를 사라지게 합니다.

              if( $val == $mx ){ $val = 1; } //현재이미지가 마지막 번호라면 1번으로 되돌립니다.

              else{ $val++; } //마지막 번호가 아니라면 카운트를 증가시켜줍니다

              $("#img"+$val).fadeIn(500); //변경된 번호의 이미지영역을 나타나게 합니다.괄호 안에 숫자는 페이드인 되는 시간을 나타냅니다.

              $("#slide").attr('val',$val); //변경된 이미지영역의 번호를 부여합니다.

              setTimeout('imgslide()',1000); //1초 뒤에 다시 함수를 호출합니다.(숫자값 1000당 1초)
              }

 

'FRONT END > jquery' 카테고리의 다른 글

jquery 태그 추가  (0) 2022.02.10