Review slider using CSS, HTML and/or Jquery or Java

问题

I am trying to create a slider that allows users to move through reviews by clicking arrows. Which will go from review1 to review2 etc etc. This is what I have so far, I have set up my HTML with my reviews, and my CSS with hidden values for the time being. Any help would be greatly greatly appreciated

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

This is answer

<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>
<body>
<div class="review1">
    <h1>1&ldquo;THIS PLACE IS AMAZING&rdquo;<br>
    </h1>
    <p class= "vancouver">- The Georgia Straight</p>
</div>
<div class="review2">
    <h1>2&ldquo;A TASTE OF ITALY IN VANCOUVER&rdquo;<br>
    </h1>
    <p class= "Sun">- The Vancouver Sun</p>
</div>
<div class="review3">
    <h1>3&ldquo;THIS IS THE REAL DEAL&rdquo;<br>
    </h1>
    <p class= "Yelp">- Yelp.ca</p>
</div>
<div class="review4">
    <h1>4&ldquo;SIMPLY DELICIOUS&rdquo;<br>
    </h1>
    <p class= "Buzz">- VanCity Buzz</p>
</div>

<span class="clickBtn">click it For next</span>
<span class="clickBtnBack">click it For back</span>
<script>
var counter=1,counterBack=1;
$(".clickBtn").click(function(){
if(counter==1)
{
$(".review1").show();
$(".review2").hide();
$(".review3").hide();
$(".review4").hide();
counter++;
counterBack=1;
}
else if(counter==2)
{
$(".review1").hide();
$(".review2").show();
$(".review3").hide();
$(".review4").hide();
counter++;
counterBack=4;
}
else if(counter==3)
{
$(".review1").hide();
$(".review2").hide();
$(".review3").show();
$(".review4").hide();
counter++;
counterBack=3;
}
else
{
$(".review1").hide();
$(".review2").hide();
$(".review3").hide();
$(".review4").show();
counter=1;
counterBack=2;
}

});
//If back is clicked

$(".clickBtnBack").click(function(){
if(counterBack==1)
{
$(".review1").hide();
$(".review2").hide();
$(".review3").hide();
$(".review4").show();
counterBack++;
counter=1;
}
else if(counterBack==2)
{
$(".review1").hide();
$(".review2").hide();
$(".review3").show();
$(".review4").hide();
counterBack++;
counter=4;
}
else if(counterBack==3)
{
$(".review1").hide();
$(".review2").show();
$(".review3").hide();
$(".review4").hide();
counterBack++;
counter=3;
}
else
{
$(".review1").show();
$(".review2").hide();
$(".review3").hide();
$(".review4").hide();
counterBack=1;
counter=2;
}

});

</script>
</body>
</html>

The link for JSFIDDLE http://jsfiddle.net/Su3pG/

UPDATED FOR PREV,NEXT => http://jsfiddle.net/Su3pG/2/

Paste above HTML as it is in your machine(in New html file)

来源：https://stackoverflow.com/questions/22293523/review-slider-using-css-html-and-or-jquery-or-java

标签

javascript