私はこれを理解しようとしてかなり長い間立ち上がってきました。このウェブサイトhttp://css3.bradshawenterprises.com/slide1/で、これは私にコードとすべてを与えて、私はそれがそうであるべきであるように私のウェブページにそれを差し込んだ。
私は今それを更新しましたこれは私のコードです誰かがそれを手伝ってくれます...
<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>
しかし、私が何をしても、これを機能させることはできず、現在のWebサイトで本当に必要です。