웹디자인기능사 실기/ 슬라이드

1. 좌에서 우로 슬라이드

 

---------------html-----------------

<div id="imgslide">
  <div class="imgs"> 
  <img src="" alt="">  
  <img src="" alt=""> 
  <img src="" alt="">

  </div> <!--imgs end-->
</div> <!--imgslide end-->

--------------css--------------------

#imgslide{height: 300px;}

 

.imgs{position: relative;

overflow: hidden; height: 300px; width: 1200px; }

 

.imgs > img{width: 100%;  position: absolute; transition: all 2s;}

----------------js-----------------
start();
var imgs = 2;
var now = 0;
function start(){
  $(".imgs>img").eq(0).siblings().css({"margin-left":"-2000px"});
  setInterval(function(){slide();},2000);
}
function slide(){
  now = now==imgs?0:now+=1;
  $(".imgs>img").eq(now-1).css({"margin-left":"-2000px"});
  $(".imgs>img").eq(now).css({"margin-left":"0px"});
}


※여기서 위에서 아래로는 margin-top으로 하면 되는 부분 

※transition을 안주면 fade랑 구분이 안감 

 

  function start(){
  $(".imgslide>a").eq(0).siblings().animate({width:"-1200px"});
  
  setInterval(function(){
  now = now==imgs?0:now+=1;
  $(".imgslide>a").eq(now-1).animate({width:"-1200px"});   
  $(".imgslide>a").eq(now).animate({width:"1200px"});},3000); 
  }

 

이코드도 한번 해보길! 

 

2.fade in - out 

 

------------------html---------------

<div class="imgslide">

      <a href="#"><img src="" alt=""></a>

      <a href="#"><img src="" alt=""></a>

      <a href="#"><img src="" alt=""></a>

 </div>

------------------css------------------

.imgslide{

    height:350px;

    width:800px;  

    position:relative; 

}

.imgslide>a{     

    display:block;

    position:absolute;

    left:0;

    top:0;

    overflow:hidden;

    transition:all 3s;

}

-----------------js---------------------

  $('.imgslide a:gt(0)').hide();
  setInterval(function(){
   $('.imgslide a:first-child').fadeOut()
      .next('a').fadeIn()
      .end().appendTo('.imgslide');},3000);