JS滑块-有可能超链接我的图像

Question

我找到了一些简单的img滑块代码，但我似乎无法超链接图像。

$(function() {
  $('.slider :first-child').appendTo('.slider').show();
  setInterval(function() {
    $('.slider :first-child').hide().appendTo('.slider').fadeIn(1000);
  }, 3000);
});

.js .slider img { display: none; }
.js .slider img:first-child { display: block; }
.slider {
	position:relative;
}
.slider img {
	max-width: 980px;
	position:absolute;
	left:0;
	top:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <a href="https://www.google.co.uk" target="_blank"><img src="http://unsplash.it/375/150"></a>
  <img src="http://unsplash.it/375/148">
  <img src="http://unsplash.it/375/149">
  <img src="http://unsplash.it/375/152">
  <img src="http://unsplash.it/375/151">
</div>

我试过了，但是没有成功:

<a href="https://www.google.co.uk" target="_blank"><img src="../files/images/banners/01.png"></a>

此外，不太重要的是，第一张图像似乎需要很长时间(大约10秒)才能移动到下一张，然后每3秒更改一次。有人能看出代码中有什么错误导致第一个挂起吗?

哦，我对JS知之甚少:)

Answer 1

您的代码中有以下issues

1. .js .slider img在你的css部分不适用，在给定的代码.slider不是在元素having .js class。所以把它改成.slider img。类似.js .slider img:first-child到.slider a:first-child img
2. 你需要把你的<img> tag放在<a> tag旁边，以启用超链接。
3. 您需要将setInterval function中的$('.slider :first-child')替换为$('.slider a :first')。
4. 图片加载需要一些时间，你可以把你的代码在$(window).load(function() {});