Question

<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属性中添加一个链接上面说的东西不起作用。因此，当目前在描述中给出链接时，它是rel 如上所述

所以该怎么做才是这个滑块我正在建立我的网站

Answer 1

//Set the opacity to 0 and width to 1px


$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({width: '1px'}, { queue:true, duration:300 });  

//Animate the caption, opacity to 0.7 and width to 100px, a slide left effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({width: '600px'},600 );

用标题幻灯片从左到右效果替换高度为宽度

Answer 2

在rel属性中使用单引号，否则您将关闭该属性，从而导致HTML无效

<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'>link</a>**"/>
</a>

在一个相关滑块内链接

2 个答案: