Question

我有这个代码，它在悬停时的图像上工作正常，它可以很好地播放图像，但是如果我尝试点击它以前往链接我想要向前推进它不起作用。请给我任何提示。

这是代码：

<!doctype html>
<html lang="en">
 <head>
<meta charset="UTF-8" />
<title>test</title>
<meta name="description" content=""/>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />


<style>

body{background-color:#000}

.img-wrapper{
width: 300px;
height: 400px;
position: relative;
margin: 0 auto;
cursor:pointer
}
.img-wrapper img{
top: 0px;
left: 0px;
position: absolute;
-webkit-animation: showMe 1.6s linear infinite 0s forwards;
-moz-animation: showMe 1.6s linear infinite 0s forwards;
-o-animation: showMe 1.6s linear infinite 0s forwards;
-ms-animation: showMe 1.6s linear infinite 0s forwards;
animation: showMe 1.6s linear infinite 0s forwards;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;   
}
.img-wrapper img:nth-child(1){
z-index: 9;
}
.img-wrapper img:nth-child(2){
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
z-index: 8;
}
 .img-wrapper img:nth-child(3){
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
z-index: 7;
}
.img-wrapper img:nth-child(4){
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
-ms-animation-delay: 0.6s;
animation-delay: 0.6s;
z-index: 6;
}
.img-wrapper img:nth-child(5){
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
-ms-animation-delay: 0.8s;
animation-delay: 0.8s;
z-index: 5;
}
.img-wrapper img:nth-child(6){
-webkit-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
-o-animation-delay: 1.0s;
-ms-animation-delay: 1.0s;
animation-delay: 1.0s;
z-index: 4;
}
.img-wrapper img:nth-child(7){
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-ms-nimation-delay: 1.2s;
animation-delay: 1.2s;
z-index: 3;
}
.img-wrapper img:nth-child(8){
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
-o-animation-delay: 1.4s;
-ms-animation-delay: 1.4s;
animation-delay: 1.4s;
z-index: 2;
}
.img-wrapper:hover img{
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}



@-webkit-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}

@-moz-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}

@-o-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}

@-ms-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}

@keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}





</style>

</head>

<body>
<!--Top Bar Starts-->


<div class="img-wrapper" id="beachtrain">

<img src="btns/hover1.png" alt="image01"/>
<img src="btns/hover2.png" alt="image02"/>
<img src="btns/hover3.png" alt="image03"/>
<img src="btns/hover1.png" alt="image04"/>
<img src="btns/hover2.png" alt="image05"/>
<img src="btns/hover3.png" alt="image06"/>
<img src="btns/hover2.png" alt="image07"/>
<img src="btns/hover3.png" alt="image08"/>




</div>











    <script>
        $("#beachtrain").click(function() {
  window.location.href = 'http://www.google.co.uk'
});
    </script>




</body>
</html>

Answer 1

尝试将您的脚本代码放在document.ready块中。在jquery中，您可以使用快捷方式执行此操作：

$(function(){
    $('#beachtrain').click(function(){
        // your code 
    });
});

Answer 2

我不确定你是不是把它遗漏了，但是你底部的脚本是使用jquery而且你没有包含jquery。如果您不想使用它，请使用以下命令：

<script>
    var myElement = document.getElementById('beachtrain');
    myElement.addEventListener('click', function(e) {
        window.location.href = 'http://www.google.co.uk'
    });
</script>

您是否有任何理由使用此功能而不仅仅是将您的beachtrain元素作为链接？这是最干净的解决方案。请参阅下面的示例：

<a href="http://www.google.co.uk" class="img-wrapper" id="beachtrain" style="display:block;">
  <img src="btns/hover1.png" alt="image01"/>
  <img src="btns/hover2.png" alt="image02"/>
  <img src="btns/hover3.png" alt="image03"/>
  <img src="btns/hover1.png" alt="image04"/>
  <img src="btns/hover2.png" alt="image05"/>
  <img src="btns/hover3.png" alt="image06"/>
  <img src="btns/hover2.png" alt="image07"/>
  <img src="btns/hover3.png" alt="image08"/>
</a>

使用onClick（）悬停时无法单击的多个图像滑块

2 个答案: