Chuyển động đơn giản với jquery

Bắt đầu với mã HTML và CSS

DeMo

<div class="slideshow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLvOzy6yBSxZ0dHf3vjHKTQG65MwM3wokqTxfZdjDLYilnXdhU5Ek0YMRQ0xlqAWlMkv9UdneHJkKBGFEmvOsc9efN3XWdCcvymWZGvi5jnY-bpCtMrVksM5P6QuWlBkkPYgQYW213hw/s320/ao-khoac-kaki-bsk-2013-1.jpg" width="300px" height="300px" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhButKsFYxkdJbGgnoeakftvxncXyuYrrs_NRB2EHFyYh9BeIfHtt2HhoVCAy3_wPQJ3PckiTYfeaqf8E7lsxUILWvmCopitMegcYeTRzwpQtIhU4JVm4nltNsBrg6oZCnlRjnQMmneSA/s320/ao-khoac-zara-jacket-zara-2013-ao-khoac-da-zara-1.jpg" width="300px" height="300px" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC1JYAto2DnQRuWmc9axp39YdlUNjwEOFVz9FNHam8OPw3Rr_HYUtr7b7XJhrTUi15CUW4UQU-dkVa0xrqv1lgIdKdMi14pARBbSn62qSYpc7jaGGfnTLdxGemjgJcrxoYgdppnEPfsA/s320/ao-khoac-kaki-bsk-2013-3.jpg" width="300px" height="300px" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ8KuQt2Qxp4DSWUE0JLOoJP8wAGFe9cBfm1SJnDeB8WsO8-IyzqK9wZwt88ZblcYA0yozUmPws3DrRdUSjhahiTlGDxIiBzId9vivQ7PvTzCF0s6zk9mtoNhfnSn6Ig9gyZaC_fkyBg/s320/ao-so-mi-zara-nam-dai-tay-1.jpg" width="300px" height="300px" />

</div>

Chèn với thẻ dưới thẻ </head > mã

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$(function() {

    $('.slideshow img:gt(0)').hide();
  setInterval(function(){


  $('.slideshow :first-child').fadeOut()
 
     .next('img').fadeIn()

     .end().appendTo('.slideshow');}
,
   
          3000);
});






</script>


<style>
.slideshow{
position:relative;width:500px; height:100px;
}
.slideshow img{
position:absolute;

}

</style>

Read More →