带有电子邮件链接的响应式和居中幻灯片答案

【问题标题】：Responsive and centered slideshow with email link带有电子邮件链接的响应式和居中幻灯片
【发布时间】：2016-07-25 19:37:37
【问题描述】：

我目前正在努力改进我非常“简单”的网站。这是一个自动运行的循环幻灯片，大小响应并完全居中。到目前为止一切正常。我唯一的问题是我希望幻灯片在单击时链接到我的电子邮件。除了在上面贴一个大的透明字母外，我无法让它工作。其他人是否知道更好的解决方案来实际实现幻灯片或其他内容中的链接？

感谢您的帮助。这是我的网站代码，这就是我的全部：

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

【问题讨论】：

好吧，你正在使用
- 标签。这肯定会导致问题

标签： jquery html center flexslider responsive

【解决方案1】：

您好，我的滑块工作正常，有几点需要注意：

就像在我的 cmets 中一样，使用 <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 函数过早关闭。

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

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

【讨论】：

嘿，马特，非常感谢，但我认为 Flexslider 不是解决方案。我将编辑这个问题，以便我们查看我当前的代码，也许我们可以对此做些什么。谢谢！
@PhilK 如果您更新您的问题，请务必澄清“完美居中且响应迅速的幻灯片”的意思。