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

前端未结

关注

 1  1714

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 hav

相关标签:

1条回答

终归单人心

2020-12-22 03:12

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)

0 讨论(0)