0
<script type="text/javascript" src="js/jquery-1.3.1.min"></script>
<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});
//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100).animate({height: '180px'},500 );
//Display the content
$('#gallery .content').html(caption);
}
</script>
<style type="text/css">
body{
font-family:arial
}
.clear {
clear:both
}
#gallery {
position:relative;
height:360px
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:500
}
#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:180px;
width:100%;
position:absolute;
bottom:0;
top: 358px;
}
#gallery .caption .content {
margin:5px
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
<h1></h1>
<div id="gallery">
<a href="#" class="show">
<img src="images/2.png" alt="Grass Blades" width="940" height="360" title="" alt="" rel="<h3>Title</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis interdum sem, sit amet dictum nisi imperdiet id. Sed augue massa, luctus vel condimentum sed, vestibulum vehicula dolor. Nulla convallis, ligula in ultricies lacinia, libero neque blandit neque, a semper diam ante vitae sem.**<a href="">link</a>**"/>
</a>
我需要添加rel属性 上面说的是不工作的链接。 所以,当一个链接可以在描述目前被赋予它是相对 提到
等什么真正做到这一点是一款滑盖我工作的建立自己的网站
谢谢你,但链接出现在文本下方 – user1015246
我不太明白,确切的问题是什么。你可以更精确地描述它,或者更好地制作一个jsFiddle,以便我们可以看到它。 – topek
[链接](http://edutube.in/10/jquery-slideshow.html)如果你看到第一个滑块链接中的链接是实际上我保留在xp网络上的文本的后面 – user1015246