我已经花了很长时间试图解决这个问题。在这个网站上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>
但无论我做什么，我都无法使其正常工作，而且我当前的网站确实需要它。
最佳答案
在代码中包含 jquery 文件。
<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>
关于javascript - 使用 JQuery 和 CSS 制作图片库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10256735/