Question

我目前正在努力改善我的“简单”网站。这是一个自动运行的循环幻灯片，具有大小响应和完美居中。到目前为止一切都很好。我唯一的问题是我希望幻灯片在点击时链接到我的电子邮件。除了在它上面打一个大的透明字母之外，我无法使它工作。其他人是否知道在幻灯片中实际实现链接的更好解决方案？

感谢您的帮助。这是我的网站代码，这就是我所拥有的：

<!DOCTYPE html>
<html>

<title>Photographer</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

<script type="text/javascript">
$('.slide').cycle({  
    fx:     'none',   
});
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<head>

<style type="text/css">

body {
  font-family: Arial;
  text-decoration: none;
  color: black;
  font-size: 75vh;
  letter-spacing: 0.1em;
}

a {
  font-family: Arial;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: transparent;
}

.slide {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center.is-Resizable {
  max-width: 60%;
  max-height: 85%;
  resize: both;
  overflow: auto;
}

.link {
  text-align: center;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  height: 85%;
  width: 30%;
  z-index: 99999;
}

</style>

</head>

<div class="link">
<a href="mailto:mail@phillip-koll.com">&#65531;</a>
</div>

<ul class="slide">
<img src="http://www.phillip-koll.com/files/_MG_0499.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://www.phillip-koll.com/files/_MG_1103.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://www.phillip-koll.com/files/_MG_2070.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://www.phillip-koll.com/files/_MG_2096.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://www.phillip-koll.com/files/_MG_2582.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://www.phillip-koll.com/files/_MG_3335.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://www.phillip-koll.com/files/_MG_2468.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://www.phillip-koll.com/files/_MG_2914.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://www.phillip-koll.com/files/_MG_3098.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://www.phillip-koll.com/files/_MG_3702.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://www.phillip-koll.com/files/_MG_3833.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://www.phillip-koll.com/files/_MG_0238.jpg" class="Absolute-Center is-Resizable"/>
</ul>

</body>
</html>

Answer 1

嗨我让滑块正常工作，有几点需要注意：

与我的评论一样，使用<ul>和<li>作为子项（请参阅更新的HTML）
您使用的图像尺寸非常大，滑块会在页面加载时下载所有图像，所以如果您不优化图像，那将是一个非常糟糕的加载时间。
我删除了2行CSS，position: absolute从容器中取出图像，这会影响滑块（请参阅更新的CSS）

HTML

<div class="flexslider">
  <ul class="slides">
    <li>
      <a href="<emaillink>"><img src="http://www.phillip-koll.com/files/_MG_0499.jpg" class="Absolute-Center is-Resizable"></a>
    </li>
    <li>...</li>
  </ul>
</div>

CSS

.Absolute-Center {
  margin: auto;
  /* THIS IS COMMENTED OUT
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  */
}

对于JS你的selector错了所以我删除了它，你的flexslider函数提前关闭了。

JS

  $('.flexslider').flexslider({
    animation: "slide",
    slideshowSpeed: 7000,
    keyboard: false
  });

Here is a js.fiddle with it working以防你想玩它。希望有所帮助。

具有电子邮件链接的响应式和中心幻灯片

1 个答案: