幻灯片顶部的内容

Question

我有一个效果很好的幻灯片，但我想在幻灯片顶部添加一些带有链接的文本，我该怎么做？

<img id="1" src="http://s5.postimg.org/dj14nd0fr/cully_slider4.jpg" alt=""/> 
<img id="2"  src="http://s5.postimg.org/mcs14gnef/cully_slider_foundation.jpg" alt="" />
<img id="3" src="http://s5.postimg.org/psfk09v93/cully_slider2.jpg" alt="" />
<img id="4" src="http://s5.postimg.org/72nkjj2if/cully_slider3.jpg"  alt="" />

.slideshow{width:1440px;height:555px;overflow:hidden;margin:0px auto}
.slideshow img{width:1440px;height:555px;display:none}

 function slideshow(){
     $(".slideshow #1").show("fade",500);
     $(".slideshow #1").delay(5500).hide("slide",{direction:"left"},500);
     var sc=$(".slideshow img").size();
     var count=2;

     setInterval(function(){
         $(".slideshow #"+count).show("slide",{direction:"right"},500);
          $(".slideshow #"+count).delay(5500).hide("slide",{direction:"left"},500);
          if (count==sc){
              count=1;
          }else{
              count=count+1
          }
     },6500);
     }

Answer 1

像幻灯片放映前创建一个容器

 <div id="slideshowLink"></div>

将链接存储在您的 img 数据中，例如

<img id="1" src="..." alt="" data-link="Your Link here" data-linkname="Name for your link"/>

并在您的 javascript 中将其添加到您的 setInterval 函数中：

img = $('#slideshow #'+count);
$('#slideshowLink').html('<a href="'+img.data('link')+'">'+ img.data('linkname') +'</a>');

幻灯片顶部的内容

Content on Top Of slidshow

html

javascript

css

jquery

slideshow