Question

我是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;
}

Answer 1

要重置位置，我们永远不会更改.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]。让我们在拇指上添加一些点击事件。我们遍历拇指列表。对于列表中的每个项目，我们添加一个单击事件侦听器。在这个监听器函数中，我们运行函数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移动到＆＃34;文件＆＃34;为清楚起见，它本身。

祝你好运！

ONCLICK / offclick？ JS计时器？如何使每一个重复工作

1 个答案: