私はこれを理解しようとしばらくしている。このウェブサイトでは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>
しかし、関係なく、私は何をすべきか、私はこの仕事を得ることはできませんし、私は本当に私の現在のウェブサイトのためにそれを必要とします。
完全なマークアップを表示できますか? –
jqueryライブラリファイルを含める場合は、 –
スペーサーが私の答えをチェックすることを確認してください。 HTMLページの間違った部分にスクリプトタグとスタイルタグを配置しました。両方のタグは常にheadタグ内に配置されます。 – Pavan