javascriptで画像をスライド

javascriptで画像をスライド:

はじめに

javascriptで画像をスライドをさせる方法が分かったのでその忘備録

方法

画像のdisplayを変えるだけ

次にどの画像を表示するかわかるようにするためにquerySelectorAllでスライドを配列で取得してあれこれする。

実装

まずhtmlに

<div id="arrow-left" class="arrow"></div> 
    <div id="arrow-right" class="arrow"></div> 
 
    <div id="slider"> 
        <div class="slide slide1"></div> 
        <div class="slide slide2"></div> 
        <div class="slide slide3"></div> 
    </div> 

とかく

slide1,2,3のbackground-imageに画像を設定していきます。

div.arrowをクリックしたときに画像が移り変わる感じにする。

cssはとりあえずこんな感じ

body,#slider{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 
 
.slide { 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 500px; 
} 
 
.slide1 { 
    background-image: url(image1.jpg); 
} 
 
.slide2 { 
    background-image: url(image2.jpg); 
} 
 
.slide3 { 
    background-image: url(image3.jpg); 
} 
 

次に矢印を作ります

cssはこれ

.arrow{ 
    cursor: pointer; 
    position: absolute; 
    margin-top: 230px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
} 
 
#arrow-left{ 
    border-width: 20px 20px 20px 0; 
    border-color: transparent gray transparent transparent; 
    left: 0; 
    margin-left: 30px; 
} 
 
#arrow-right{ 
    border-width: 20px 0 20px 20px; 
    border-color: transparent transparent transparent gray; 
    right: 0; 
    margin-right: 30px; 
} 

画像のサイズによって表示はまちまちだと思うのでarrowのmargin-topは調整してください。

そうするとこんな感じになってると思います。

それで次に画像の処理をjsで書いていきます。

jsファイルに

var sliderImages = document.querySelectorAll('.slide'); 
var arrowRight = document.getElementById('arrow-right'); 
var arrowLeft = document.getElementById('arrow-left'); 
var current = 0; 
 

と書きます。

sliderImagesはslideの画像のdivを配列として取得していて

arrowRight,arrowLeftがclickされたときにsliderImagesの現在をdisplay:noneにして次の画像を表示させる感じにしていきます。

まずはcssで

.slide1 { 
    display: none; <= 追加 
    background-image: url(image1.jpg); 
} 
 
.slide2 { 
    display: none; <= 追加 
    background-image: url(image2.jpg); 
} 
 
.slide3 { 
    display: none; <= 追加 
    background-image: url(image3.jpg); 
} 

として

function startSlide(){ 
    sliderImages[0].style.display = 'block'; 
} 
 
arrowRight.addEventListener('click', function() { 
    sliderImages[current].style.display = 'none'; 
    if(current === sliderImages.length - 1){ 
        current = -1; 
    } 
    sliderImages[current + 1].style.display = 'block'; 
    current++; 
}) 
 
arrowLeft.addEventListener('click', function() { 
    sliderImages[current].style.display = 'none'; 
    if(current === 0){ 
        current = sliderImages.length; 
    } 
    sliderImages[current - 1].style.display = 'block'; 
    current--; 
}) 
 
startSlide(); 

を書く。

arrowRightが押されたらcurrentを+1してarrowLeftが押されたらcurrentを-1していく。

だけど例えばcurrentがそのまま3,4,5,6と増えていったらこまるので

もしcurrentがsliderImages.length - 1より大きくなりそうならcurrent = -1をしている

なんで0ではなく-1なのかというとそのあとで

sliderImages[current + 1]としているからです。

arrowLeftでは反対のことをしています。

これで一応動くと思います。

おわり。