Question

I have a slideshow that works great, but i want some text with links on top of the slideshow how do i go about doing this?

<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

Create a container before the slideshow like

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

store the links in your img data like

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

and in your javascript add this to your setInterval function:

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

Content on Top Of slidshow

1 个答案: