jQuery로 이미지 자동 슬라이드 만들기!


우선 이미지들을 올려줍시다.


 <div id="slide" val="1" mx="3">

<li id="bn1"><img src="img/1.jpg" alt=""/></li>

<li id="bn2"><img src="img/2.jpg" alt=""/></li>

<li id="bn3"><img src="img/3.jpg" alt=""/></li>

</div>


id와 class는 마음대로 설정하셔도 상관없습니다.


다음은 css값을 수정해줍시다.


    #slide{

      position:relative;

      width: 500px;

    }

    #slide li{

      position:absolute;

      top:0;

      left:0;

      display:none;

      -webkit-display:block;

    }

    #slide img{

      width:500px;

      height: 300px;

    } 


#slide li에 -webkit-display:block;를 따로 준 이유는 크롬에는 li를썼을때 이미지에서도 옆에 쩜이 찍혀버려서....굳이 필요없는태그 한줄 넣어봤습니다.

li대신 div태그를 쓰면 안써도 상관없습니다.


그리고 슬라이드 이미지에 크기값을 조정해줬습니다.


 


'코딩 > jQuery' 카테고리의 다른 글

jQuery로 이미지 슬라이드 만들기1  (0) 2018.07.12

+ Recent posts

티스토리 툴바