使用 CSS、HTML 和/或 Jquery 或 Java 查看滑块 [英] Review slider using CSS, HTML and/or Jquery or Java
本文介绍了使用 CSS、HTML 和/或 Jquery 或 Java 查看滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个滑块，允许用户通过单击箭头来浏览评论.这将从review1 到review2 等等等等.这就是我到目前为止所拥有的，我已经用我的评论设置了我的HTML，暂时用隐藏值设置了我的CSS.任何帮助将不胜感激
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>“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>
和我的 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>
<body>
<div class="review1">
<h1>1“THIS PLACE IS AMAZING”<br>
</h1>
<p class= "vancouver">- The Georgia Straight</p>
</div>
<div class="review2">
<h1>2“A TASTE OF ITALY IN VANCOUVER”<br>
</h1>
<p class= "Sun">- The Vancouver Sun</p>
</div>
<div class="review3">
<h1>3“THIS IS THE REAL DEAL”<br>
</h1>
<p class= "Yelp">- Yelp.ca</p>
</div>
<div class="review4">
<h1>4“SIMPLY DELICIOUS”<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>
JSFIDDLE 的链接http://jsfiddle.net/Su3pG/
The link for JSFIDDLE http://jsfiddle.net/Su3pG/
上一个更新，下一个 => http://jsfiddle.net/Su3pG/2/
UPDATED FOR PREV,NEXT => http://jsfiddle.net/Su3pG/2/
粘贴在您机器中的 HTML 上方(在新的 html 文件中)
Paste above HTML as it is in your machine(in New html file)
这篇关于使用 CSS、HTML 和/或 Jquery 或 Java 查看滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
