あまり基本的な写真のスライダーを構築する

Question

初心者でプログラミングと教えて自分自身javascript。私はこれまで、基本的な写真スライダーを構築して、「次の」または前のボタンをクリックすると写真を変更しました。かなり基本的なもの。

JS：ここに私のコードです

var imageCount = 1; 


function change(x) { 
    imageCount = imageCount + x; 
    if(imageCount < 1) { 
     imageCount = 1; 
     return; 
    } else if (imageCount > 12) { 
     imageCount = 12; 
     return; 
    } 
    var image = document.getElementById('front'); 
    var str1 = "Images/01Pictures/Image"; 
    var str2 = imageCount; 
    var str3 = ".jpg" 
    var sum = str1.concat(str2, str3); 

    image.src = sum; 

そして、それはかなり静的だが、それは、動作します。今私はもっと野心的なものを試してみたいと思う。このような何か：

私はについては何も知らない別のものの多くが含ま

。画像は空白で区切られ、ホバー上を滑ると、メイン画像が大きくなります。 私はかなり新しいので、どこから始めるべきかわかりません。誰でも正しい方向に向けることができます。チュートリアル、または私がこれを行うことができるようにするために学ぶ必要のあるものに関するちょうど2つのアイデア。私はそれを行うことで学びたいと思うように、コードがそれをするのは望ましくありませんが、私は少しの指導が必要です。御時間ありがとうございます。

Answer 1

私はあなたがこのリンクでw3schoolを開始することをお勧めします：https://www.w3schools.com/w3css/w3css_slideshow.asp

だけでなく、CSSアニメーションに関するある程度の知識を持つことは良いです。 https://www.w3schools.com/css/css3_animations.asp

これは良いスタートになるはずです。がんばろう！

Answer 2

このチュートリアルでは、あなたが探しているもののようだ：

https://css-tricks.com/moving-boxes/