我正在尝试创建一个 slider ，允许用户通过单击箭头来浏览评论。这将从review1到review2等等。这是我到目前为止所拥有的，我已经用我的评论设置了我的HTML，并暂时用隐藏值设置了我的CSS。任何帮助将不胜感激
<div class="review1">
<h1>“THIS PLACE IS AMAZING”<br></h1>
<p class= "vancouver">- The Georgia Straight</p>
</div>
<div class="review2">
<h1>“A TASTE OF ITALY IN VANCOUVER”<br></h1>
<p class= "Sun">- The Vancouver Sun</p>
</div>
<div class="review3">
<h1>“THIS IS THE REAL DEAL”<br></h1>
<p class= "Yelp">- Yelp.ca</p>
</div>
<div class="review4">
<h1>“SIMPLY DELICIOUS”<br></h1>
<p class= "Buzz">- VanCity Buzz</p>
</div>
and my CSS
.review1{
font-family: Clarendon;
letter-spacing: .2em;
font-size: 22pt;
text-align: center;
padding-top: 200px;
width: 1024px;
}
.review2{
display: none;
font-family: Clarendon;
letter-spacing: .2em;
font-size: 22pt;
text-align: center;
padding-top: 200px;
}
.review3{
display: none;
font-family: Clarendon;
letter-spacing: .2em;
font-size: 22pt;
text-align: center;
padding-top: 200px;
}
.review4{
display: none;
font-family: Clarendon;
letter-spacing: .2em;
font-size: 22pt;
text-align: center;
padding-top: 200px;
}
最佳答案
这就是答案
<html>
<head>
<style>
.review1{
font-family: Clarendon;
letter-spacing: .2em;
font-size: 22pt;
text-align: center;
padding-top: 200px;
width: 1024px;
}
.review2{
display: none;
font-family: Clarendon;
letter-spacing: .2em;
font-size: 22pt;
text-align: center;
padding-top: 200px;
}
.review3{
display: none;
font-family: Clarendon;
letter-spacing: .2em;
font-size: 22pt;
text-align: center;
padding-top: 200px;
}
.review4{
display: none;
font-family: Clarendon;
letter-spacing: .2em;
font-size: 22pt;
text-align: center;
padding-top: 200px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
更新了上一个、下一个 => http://jsfiddle.net/Su3pG/2/
粘贴上面的 HTML，因为它在您的计算机中(在新的 html 文件中)
关于javascript - 使用 jQuery、javascript 满足以下要求的图像轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22385173/