使用 CSS、HTML 和/或 Jquery 或 Java 查看滑块

2022-01-24 00:00:00 slider jquery javascript html css

我正在尝试创建一个滑块，允许用户通过单击箭头来浏览评论.这将从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>&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>

和我的 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&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>

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)

相关文章