我是JS的新手,因此我尝试使此图像滑块对我有利。我想让每个缩略图都可单击,以使较大的图像滑入到位。我能够通过CSS悬停效果使它起作用,但是我需要它在单击时起作用。我可以使用它,但是您只能单击一次。图像不会还原为原始状态,我该如何解决?是否有计时器设置,以便在1秒钟后恢复?还是单击其他拇指时它会自动重置?
https://jsfiddle.net/Lumberjack225/t7r17r92/
的HTML
<script>
function myFunction() {
document.getElementById("demo").style.top = "100px";
}
function myFunction2() {
document.getElementById("demo2").style.top = "100px";
}
function myFunction3() {
document.getElementById("demo3").style.top = "100px";
}
</script>
<!-- Mobile Slider -->
<div class="mobileslider">
<div class="innermobile">
<div class="container3">
<span onclick="myFunction()" href="#">
<img class="thumb" src="https://images.unsplash.com/photo-1460899960812-f6ee1ecaf117?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="75px" height="75px">
<img id="demo" class="big2" src="https://images.unsplash.com/photo-1460899960812-f6ee1ecaf117?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px">
</span>
<span onclick="myFunction2()" href="#">
<img class="thumb" src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="75px" height="75px">
<img id="demo2" class="big2" src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px">
</span>
<span onclick="myFunction3()" href="#">
<img class="thumb" src="https://images.unsplash.com/photo-1453230806017-56d81464b6c5?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="75px" height="75px">
<img id="demo3" class="big2" src="https://images.unsplash.com/photo-1453230806017-56d81464b6c5?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px">
</span>
<a href="#">
<center> <img class="big2 featuredm" src="https://images.unsplash.com/photo-1456318019777-ccdc4d5b2396?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px"></center>
</a>
</div>
</div>
</div>
的CSS
.container3 {
position: relative;
height: 297px;
width: 95%;
overflow: hidden;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
}
.container3 a {
float: left;
margin-top: 9px;
margin-right: 9px;
margin-left: 9px;
margin-bottom: 9px;
}
.container3 span {
float: left;
margin-top: 9px;
margin-right: 9px;
margin-left: 9px;
margin-bottom: 9px;
}
.container2 {
position: relative;
height: 660px;
width: 960px;
overflow: hidden;
margin: 0 auto;
}
.container2 a {
float: left;
margin: 20px;
}
.big {
position: absolute;
top: 260px;
left: 20px;
}
.big2 {
position: absolute;
top: 100px;
left: 0px;
}
.big {
position: absolute;
top: 900px;
left: 20px;
-webkit-transition: top .5s ease;
-moz-transition: top .5s ease;
-o-transition: top .5s ease;
-ms-transition: top .5s ease;
transition: top .5s ease;
}
.big2 {
position: absolute;
top: 900px;
-webkit-transition: top .5s ease;
-moz-transition: top .5s ease;
-o-transition: top .5s ease;
-ms-transition: top .5s ease;
transition: top .5s ease;
margin-left: auto;
margin-right: auto;
}
.featured {
top: 260px;
left: 20px;
z-index: -3;
}
.featuredm {
top: 100px;
left: 0px;
z-index: -3;
}
a:hover .thumb {
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
a:hover .big {
top: 260px;
}
span:hover .thumb {
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
.featured2 {
top: 260px;
left: 20px;
z-index: -3;
}
最佳答案
要重置位置,我们永远不会更改.big2图片的单独顶部位置。相反,让我们创建一个应用于所选图像的新类。
CSS:
.selected {
top: 100px;
}
每当我们单击拇指时。我们将在.big2图片中添加或删除此类,以将其上下移动。然后,将其添加到与单击的拇指对应的图像中。
javascript:
我们使用.thumb类捕获所有元素,并将它们存储在名为thumbs的数组中,使用.big2进行相同操作,并将它们存储在bigs中。
var thumbs = document.querySelectorAll('.thumb');
var bigs = document.querySelectorAll('.big2');
现在,我们有两个具有相同顺序的列表,例如:thumbs [thumb0,thumb1,thumb2],bigs [big0,big1,big2]。让我们向大拇指添加一些点击事件。我们遍历拇指列表。对于列表中的每个项目,我们添加一个click事件监听器。
在此侦听器函数内部,我们运行函数returnAll(),该函数从bigs列表中的所有项目中删除.selected类。然后,将选定的类添加到与单击的拇指相同的列表中的大位置。
for (i = 0; i < thumbs.length; i++) {
(function(i) {
thumbs[i].addEventListener('click', function() {
returnAll();
bigs[i].classList.add("selected")
});
})(i);
}
function returnAll(){
for (i = 0; i < bigs.length; i++) {
bigs[i].classList.remove("selected");
}
}
这是您的小提琴,使用上面的代码进行了更新:
https://jsfiddle.net/t7r17r92/3/
请注意,为清楚起见,我将所有javascript都移到了自己的“文件”中。
祝好运!