slideshow-fade

HTML

<ul class="slideshow-fade">
  <li><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img1.jpg" alt="スライドショー画像1"></li>
  <li><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img2.jpg" alt="スライドショー画像2"></li>
  <li><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img3.jpg" alt="スライドショー画像3"></li>
  <li><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img4.jpg" alt="スライドショー画像4"></li>
</ul>

SCSS

.slideshow-fade{
    position: relative;
    width: 280px;
    height: 200px;
    li{
        list-style: none;
        width: 100%;
        height: 100%;
        img{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
        }
    }
}

JavaScript

$(function(){
  $(".slideshow-fade li").css({"position":"relative","overflow":"hidden"});
  $(".slideshow-fade li").hide().css({"position":"absolute","top":0,"left":0});
  $(".slideshow-fade li:first").addClass("fade").show();
  setInterval(function(){
    var $active = $(".slideshow-fade li.fade");
    var $next = $active.next("li").length?$active.next("li"):$(".slideshow-fade li:first");
    $active.fadeOut(1000).removeClass("fade");
    $next.fadeIn(1000).addClass("fade");
  },2000);
});