图像轮播用于使用jQuery,javascript的以下要求

时间:2014-03-13 16:38:11

标签: javascript jquery css

我正在尝试创建一个滑块,允许用户通过单击箭头来浏览评论。这将是从review1到review2等等。这是我到目前为止,我已经用我的评论设置了我的HTML,并且我的CSS暂时具有隐藏值。非常感谢任何帮助

<div class="review1">
    <h1>&ldquo;THIS PLACE IS AMAZING&rdquo;<br></h1>
     <p class= "vancouver">- The Georgia Straight</p>
    </div>

    <div class="review2">
    <h1>&ldquo;A TASTE OF ITALY IN VANCOUVER&rdquo;<br></h1>
     <p class= "Sun">- The Vancouver Sun</p>
    </div>

    <div class="review3">
    <h1>&ldquo;THIS IS THE REAL DEAL&rdquo;<br></h1>
     <p class= "Yelp">- Yelp.ca</p>
    </div>

    <div class="review4">
    <h1>&ldquo;SIMPLY DELICIOUS&rdquo;<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;
}

1 个答案:

答案 0 :(得分:0)

这是答案

<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>

UPV FOR PREV,NEXT =&gt; http://jsfiddle.net/Su3pG/2/

将HTML粘贴到您的计算机上(在新的html文件中)