ぬえさぶろうのAnimate放送部

スライドショー

< >

解説

画像の下に表示されているインジケーターでスライドの枚数と現在表示されている画像がわかりやすく表示されるスライドショー
インジケーターの ● をクリックすれば、スライドの途中でも指定の画像を見ることができる。

コード

HTML

 <div class="slideshow">
        <div class="slideshow-slides">
               <a href="./" class="slide"><img src="../../images/news/slideshow/slide_image01.png" alt=""></a>
               <a href="./" class="slide"><img src="../../images/news/slideshow/slide_image02.png" alt=""></a>
               <a href="./" class="slide"><img src="../../images/news/slideshow/slide_image03.png" alt=""></a>
               <a href="./" class="slide"><img src="../../images/news/slideshow/slide_image04.png" alt=""></a>
               <a href="./" class="slide"><img src="../../images/news/slideshow/slide_image05.png" alt=""></a>
               <a href="./" class="slide"><img src="../../images/news/slideshow/slide_image06.png" alt=""></a>
    <!--/.slideshow-slides--></div>
        <div class="slideshow-indicator> </div>
<!--/.slideshow--></div>

CSS

@charset "utf-8";
/* スライドショー02*/
.slideshow {
  background-color: rgba(0, 0, 0, 0.1);
  min-width: 285px;
  height: auto;
  min-height: 176px;
  overflow: hidden;
  position: relative;
}
.slideshow-slides {
  width: 100%;
  heigh: 100%;
  position: absolute;
}
.slideshow-slides .slide {
  width: 100%;
  height: 100%;
  position: absolute;
}
.slideshow-slides .slide img {
  left: 0%;
  margin-left: 0;
  position: absolute;
}
/*slideshow-nav*/
.slideshow-nav a, .slideshow-indicator a {
  overflow: hidden;
}
.slideshow-nav a::before, .slideshow-indicator a::before {
  content: '';
  display: inline-block;
  font-size: 0;
  line-height: 0;
}
.slideshow-nav a {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin-top: -36px;
}
.slideshow-nav a.prev {
  width: 40px;
  line-height: 70px;
  text-align: center;
  margin-left: -140px;
  background: #ccc;
  color: #000;
}
.slideshow-nav a.next {
  width: 40px;
  line-height: 70px;
  text-align: center;
  margin-left: 100px;
  background: #ccc;
  color: #000;
}
.slidhow-nav a.disabled {
  display: none;
}
/*インジケーター*/
.slideshow-indicator {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 20px;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  background: #ccc;
  padding-left: 25px;
}
.slideshow-indicator a {
  display: block;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  margin-right: 10px;
  background: #fff;
  border-radius: 50%;
}
.slideshow-indicator a.active {
  background: #7E9374;
  cursor: default;
}
.slideshow-indicator a::before {
  margin-left: -110px;
}
.slideshow-indicator a.active::before {
  margin-left: -130px;
}
@media only screen and (min-width:768px), print {
  .slideshow {
    width: 97%;
    min-width: 748px;
    min-height: 421px;
    overflow: hidden;
    position: relative;
  }
  .slideshow-slides {
    width: 100%;
    heigh: 100%;
    position: absolute;
  }
  .slideshow-slides .slide {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .slideshow-slides .slide img {
    left: 50%;
    margin-left: -374px;
    position: absolute;
  }
  /*slideshow-nav*/
  .slideshow-nav a, .slideshow-indicator a {
    overflow: hidden;
  }
  .slideshow-nav a::before, .slideshow-indicator a::before {
    content: '';
    display: inline-block;
    font-size: 0;
    line-height: 0;
  }
  .slideshow-nav a {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin-top: -36px;
  }
  .slideshow-nav a.prev {
    width: 40px;
    line-height: 70px;
    text-align: center;
    margin-left: -374px;
    background: #ccc;
    color: #000;
  }
  .slideshow-nav a.next {
    width: 40px;
    line-height: 70px;
    text-align: center;
    margin-left: 318px;
    background: #ccc;
    color: #000;
  }
  .slidhow-nav a.disabled {
    display: none;
  }
  /*インジケーター*/
  .slideshow-indicator {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    background: #ccc;
    padding-left: 250px;
  }
  .slideshow-indicator a {
    display: block;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    margin-right: 10px;
    background: #fff;
    border-radius: 50%;
  }
  .slideshow-indicator a.active {
    background: #7E9374;
    cursor: default;
  }
  .slideshow-indicator a::before {
    margin-left: -110px;
  }
  .slideshow-indicator a.active::before {
    margin-left: -130px;
  }
}
@media only screen and (min-width:1024px), print {
  .slideshow {
    width: 69%;
    min-width: 714px;
    min-height: 402px;
    overflow: hidden;
    position: relative;
  }
  .slideshow-slides {
    width: 100%;
    heigh: 100%;
    position: absolute;
  }
  .slideshow-slides .slide {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .slideshow-slides .slide img {
    width: 100%;
    left: 50%;
    margin-left: -358px;
    position: absolute;
  }
  /*slideshow-nav*/
  .slideshow-nav a, .slideshow-indicator a {
    overflow: hidden;
  }
  .slideshow-nav a::before, .slideshow-indicator a::before {
    content: '';
    display: inline-block;
    font-size: 0;
    line-height: 0;
  }
  .slideshow-nav a {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin-top: -36px;
  }
  .slideshow-nav a.prev {
    width: 40px;
    line-height: 70px;
    text-align: center;
    margin-left: -358px;
    background: #ccc;
    color: #000;
  }
  .slideshow-nav a.next {
    width: 40px;
    line-height: 70px;
    text-align: center;
    margin-left: 318px;
    background: #ccc;
    color: #000;
  }
  .slidhow-nav a.disabled {
    display: none;
  }
  /*インジケーター*/
  .slideshow-indicator {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    background: #ccc;
    padding-left: 250px;
  }
  .slideshow-indicator a {
    display: block;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    margin-right: 10px;
    background: #fff;
    border-radius: 50%;
  }
  .slideshow-indicator a.active {
    background: #7E9374;
    cursor: default;
  }
  .slideshow-indicator a::before {
    margin-left: -110px;
  }
  .slideshow-indicator a.active::before {
    margin-left: -130px;
  }
}

JS

/*多機能なスライドショー*/
$(function(){
    $('.slideshow').each(function(){
        var $container = $(this),
            $slideGroup = $container.find('.slideshow-slides'),
            $slides = $slideGroup.find('.slide'),
            $nav = $container.find('.slideshow-nav'),
            $indicator = $container.find('.slideshow-indicator'),
            
            slideCount = $slides.length,
            indicatorHTML ='',
            currentIndex = 0,
            duration = 500,
            interval = 7500,
            timer;
        
        $slides.each(function(i){
            $(this).css({left:100 * i + '%' });
            indicatorHTML += '<a href="#">' + (i+1) +'</a>';
        });
        
        //インジケーターにコンテンツを挿入
        $indicator.html(indicatorHTML);
        
        //関数の定義
        function goToSlide(index){
            //スライドグループをターゲットの位置に合わせて移動
 $slideGroup.animate({left:-100 * index + '%'}, duration);
            
            //現在のスライドのインデックス上書き
            currentIndex = index;
            //ナビゲーションとインジケーターの状態の更新
            updateNav();
        }
        
        //スライドの状態に応じてナビゲーションとインジケーターを更新する関数
        function updateNav(){
            var $navPrev = $nav.find('.prev'),
                $navNext = $nav.find('.next');
            //もし最初のスライドなら、Prevナビゲーションを無効に
            if(currentIndex === 0){
                $navPrev.addClass('disabled');
            }else{
                $navPrev.removeClass('disabled');
            }
            //もし最後のスライドならNextナビゲーションを無効に
            if(currentIndex === slideCount - 1){
                $navNext.addClass('disabled');
            }else{
                $navNext.removeClass('disabled');
            }
            //現在のスライドのインジケーターを無効に
$indicator.find('a').removeClass('active').eq(currentIndex).addClass('active');
        }
        //タイマーを開始する関数
        function startTimer(){
            //変数intervalで設定した時間が経過するごとに処理を実行
            timer = setInterval(function(){
                var nextIndex = (currentIndex+1)%slideCount;
                goToSlide(nextIndex);
            },interval);
        }
        
        function stopTimer(){
            clearInterval(timer);
        }
        //イベントの登録
        $nav.on('click','a',function(event){
            event.preventDefault();
            if($(this).hasClass('prev')){
                goToSlide(currentIndex - 1);
            }else{
                goToSlide(currentIndex + 1);
            }
        });
        //インジケーターのリンクがクリックされたら該当するスライドを表示
        $indicator.on('click','a', function(event){
            event.preventdefault();
            if(!$(this).hasClass('active')){
                goToSlide($(this).index());
            }
        });
        
        //マウスが乗ったらタイマーを停止、外れたら開始
        $container.on({
            mouseenter: stopTimer,
            mouseleave:startTimer
        });
        //最初のスライドを表示
        goToSlide(currentIndex);
        //タイマーをスタート
        startTimer();
    });//slideshow
});

解説

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa