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は調整してください。

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

slide.png

それで次に画像の処理を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では反対のことをしています。

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

おわり。