Question

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我已经尝试过了，但它没有用：

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

另外，不太重要的是，第一张图片似乎需要花费很长时间（约10秒）才能移动到下一张图像，然后每3秒钟更换一次。任何人都可以看到使第一个代码挂起的代码有什么问题吗？

哦，我对JS知之甚少。）

提前致谢。

Answer 1

您的代码中有以下issues

.js .slider img

css不适用，在给定代码中.slider不在元素having .js class中。所以将其更改为.slider img。同样地.js .slider img:first-child到.slider a:first-child img
您需要将<img> tag放在<a> tag边以启用超链接。
您需要将$('.slider :first-child')中的选择器setInterval function替换为$('.slider a :first')。
图片加载需要一些时间，您可以将代码放入$(window).load(function() {});

<强> DEMO

JS滑块 - 是否可以超链接我的图像？

1 个答案: