0

私は現在、非常に「シンプルな」ウェブサイトを改善しようとしています。これは、自動的に実行されるサイクル スライドショーで、サイズに反応し、完全に中央に配置されます。これまでのところ、すべて正常に動作しています。私の唯一の問題は、スライドショーをクリックしたときにメールにリンクすることです。その上に大きな透明な文字を叩く以外に機能させることができませんでした. スライドショーなどに実際にリンクを実装するためのより良い解決策を他の誰かが知っていますか?

ご協力いただきありがとうございます。これが私のウェブサイトのコードです。

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

1 に答える 1

0

こんにちは、スライダーが機能するようになりました。注意すべき点がいくつかあります。

  1. 私のコメントのように、子アイテムとして使用<ul>し<li>ます（更新された HTML を参照）
  2. 使用している画像のサイズは非常に大きく、スライダーはページの読み込み時にすべての画像をダウンロードするため、画像を最適化しないと、読み込み時間が長くなります.
  3. CSS の 2 行を削除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
  });

あなたがそれで遊びたい場合に備えて、それが機能するjs.fiddleがあります。それが役立つことを願っています。

于 2016-04-05T18:49:33.197 に答える