イメージスライダ右から左

これは私のコードです。私は5つのイメージにそれぞれ独自のdivと共通クラスの "image"を持っています。私の質問は、GIFで効果を達成する方法です。任意の番号をクリックすると、現在のイメージは左に移動し、新しいイメージは右から来ます。イメージスライダ右から左

HTML

 <!DOCTYPE html> 
     <html lang="en">[enter image description here][1] 

      <body> 

        <div class="image"> 
         <div class="image-one"> 
          </div> 
         </div> 
        <div class="image"> 
         <div class="image-two"> 
          </div> 
         </div> 
        <div class="image"> 
         <div class="image-three"> 
          </div> 
         </div> 
        <div class="image"> 
         <div class="image-four"> 
          </div> 
         </div> 
        <div class="image"> 
         <div class="image-five"> 
          </div> 
         </div> 
        <div class="num-one num"> 
         1 
        </div> 
        <div class="num-two num"> 
         2 
        </div> 
        <div class="num-three num"> 
         3 
        </div> 
        <div class="num-four num"> 
         4 
        </div> 
        <div class="num-five num"> 
         5 
        </div> 

     </body> 
     </html>

CSS

   body { 
        width: 100%; 
       } 

       .image { 
        position: fixed; 
        top: 210px; 
        left: 50%; 
        width: 700px; 
        height: 500px; 
        text-align: center; 
        margin-left: -350px; 
       } 

       .image-one { 
        position: fixed; 
        width: 700px; 
        height: 500px; 
        background-image: url(images/2322.jpg); 
        background-size: cover; 
        background-position: center center; 
       } 

       .image-two { 
        position: fixed; 
        left: 1500px; 
        width: 700px; 
        height: 500px; 
        background-image: url(images/4334f4.jpg); 
        background-size: cover; 
        background-position: center center; 
        box-shadow: 0 0px 10px rgba(0,0,0,0.25); 
        border-left: solid white; 
        border-width: 5px; 
       } 

       .image-three { 
        position: fixed; 
        left: 1500px; 
        width: 700px; 
        height: 500px; 
        background-image: url(images/54454c43.jpg); 
        background-size: cover; 
        background-position: center center; 
        box-shadow: 0 0px 10px rgba(0,0,0,0.25); 
        border-left: solid white; 
        border-width: 5px; 
       } 

       .image-four { 
        position: fixed; 
        left: 1500px; 
        width: 700px; 
        height: 500px; 
        background-image: url(images/23fd7hgg.jpg); 
        background-size: cover; 
        background-position: center center; 
        box-shadow: 0 0px 10px rgba(0,0,0,0.25); 
        border-left: solid white; 
        border-width: 5px; 
       } 

       .image-five { 
        position: fixed; 
        left: 1500px; 
        width: 700px; 
        height: 500px; 
        background-image: url(images/766gfs45.jpg); 
        background-size: cover; 
        background-position: center center; 
        box-shadow: 0 0px 10px rgba(0,0,0,0.25); 
        border-left: solid white; 
        border-width: 5px; 
       } 

       .num { 
        position: fixed; 
        left: 500px; 
        top: 750px; 
        width: 50px; 
        height: 50px; 
        text-align: center; 
        font-family: serif; 
        font-size: 25px; 
        line-height: 50px; 
        background-color: dodgerblue; 
       } 

       .num-two { 
        position: fixed; 
        left: 550px; 
       } 

       .num-three { 
        position: fixed; 
        left: 600px; 
       } 

       .num-four { 
        position: fixed; 
        left: 650px; 
       } 

       .num-five { 
        position: fixed; 
        left: 700px; 
       }

https://i.stack.imgur.com/IuhxX.gif

出典

2016-10-23 Ezio

私はここで見つけることができます使用して、実際に火格子スライダーがあります。 http://www.slidesjs.com/

基本設定はあなたのものとかなり似ています。

<div id="slides"> 
    <img src="image2"> 
    <img src="image3"> 
    <img src="image4"> 
    <img src="image5"> 
    <img src="image6"> 
</div>

ダウンロードそこに発見され、スクリプト

<script> 
$(function() { 
    $('#slides').slidesjs({ 
    width: 940, 
    height: 528, 
    navigation: { 
     effect: "fade" 
    }, 
    pagination: { 
     effect: "fade" 
    }, 
    effect: { 
     fade: { 
     speed: 400 
     } 
    } 
    }); 
});

を追加しているJS

出典

2016-10-23 17:28:35

イメージスライダ右から左

答えて

関連する問題