2012-04-21 7 views
2

私はこれを理解しようとしばらくしている。このウェブサイトではhttp://css3.bradshawenterprises.com/slide1/が私にコードとすべてを与え、それを私のウェブページに差し込んでいます。JQueryとCSSを使ってイメージギャラリーを作る

私は、これは私のコードである今それを更新誰かが...それで私を助けてくださいすることができます

 <html> 
    <head> 

    <style type="text/css"> 
    #slide1_controls span { 
     padding-right:2em; 
     cursor:pointer; 
    } 
    #slide1_container { 
     width:450px; 
     height:281px; 
     overflow:hidden; 
     position:relative; 
    } 
    #slide1_images { 
     position:absolute; 
     left:0px; 
     width:1800px; 
     -webkit-transition:all 1.0s ease-in-out; 
     -moz-transition:all 1.0s ease-in-out; 
     -o-transition:all 1.0s ease-in-out; 
     -ms-transition:all 1.0s ease-in-out;  
     transition:all 1.0s ease-in-out; 
    } 
    #slide1_images img { 
     padding:0; 
     margin:0; 
     float:left; 
    } 
    </style> 

<script type="text/javscript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#slide1-1").click(function() { 
      $("#slide1_images").css("left","0"); 
     }); 
     $("#slide1-2").click(function() { 
      $("#slide1_images").css("left","-450px"); 
     }); 
     $("#slide1-3").click(function() { 
      $("#slide1_images").css("left","-900px"); 
     }); 
     $("#slide1-4").click(function() { 
      $("#slide1_images").css("left","-1350px"); 
     }); 
    }); 

    </script> 


    </head> 
    <body> 


    <div id="slide1_container"> 
     <div id="slide1_images"> 
      <img src="pictures/1.jpg" /> 
      <img src="pictures/2.jpg" /> 
      <img src="pictures/3.jpg" /> 
      <img src="pictures/4.jpg" />   
     </div> 
    </div> 
    <p id="slide1_controls"> 
     <span id="slide1-1">Image 1</span> 
     <span id="slide1-2">Image 2</span> 
     <span id="slide1-3">Image 3</span> 
     <span id="slide1-4">Image 4</span> 
    </p> 

    </body> 
    </html> 

しかし、関係なく、私は何をすべきか、私はこの仕事を得ることはできませんし、私は本当に私の現在のウェブサイトのためにそれを必要とします。

+1

完全なマークアップを表示できますか? –

+0

jqueryライブラリファイルを含める場合は、 –

+0

スペーサーが私の答えをチェックすることを確認してください。 HTMLページの間違った部分にスクリプトタグとスタイルタグを配置しました。両方のタグは常にheadタグ内に配置されます。 – Pavan

答えて

5

コードにjqueryファイルが含まれています。

tutorial

<script src="jquery.js"></script> 
    <script type="text/javascript" > 
    $(document).ready(function() { 
     $("#slide1-1").click(function() { 
      $("#slide1_images").css("left","0"); 
     }); 
     $("#slide1-2").click(function() { 
      $("#slide1_images").css("left","-450px"); 
     }); 
     $("#slide1-3").click(function() { 
      $("#slide1_images").css("left","-900px"); 
     }); 
     $("#slide1-4").click(function() { 
      $("#slide1_images").css("left","-1350px"); 
     }); 
    }); 
    </script> 
    <div id="slide1_container"> 
     <div id="slide1_images"> 
      <img src="/images/Cirques.jpg" /> 
      <img src="/images/Clown%20Fish.jpg" /> 
      <img src="/images/Stones.jpg" /> 
      <img src="/images/Summit.jpg" />   
     </div> 
    </div> 
    <p id="slide1_controls"> 
     <span id="slide1-1">Image 1</span> 
     <span id="slide1-2">Image 2</span> 
     <span id="slide1-3">Image 3</span> 
     <span id="slide1-4">Image 4</span> 
    </p> 
+0

これは多かれ少なかれそれを解決し、それは私に何か間違った感謝のアイデアを与えた。 –

0

あなたはjQueryのファイルが含まれていない場合、あなたはこのjQueryのコードを実行するためにもそれを含める必要があります。

$(document).ready(function() { 
$("#slide1-1").click(function() { 
    $("#slide1_images").css("left","0"); 
}); 
$("#slide1-2").click(function() { 
    $("#slide1_images").css("left","-450px"); 
}); 
$("#slide1-3").click(function() { 
    $("#slide1_images").css("left","-900px"); 
}); 
$("#slide1-4").click(function() { 
    $("#slide1_images").css("left","-1350px"); 
}); 

});

関連する問題