鏈接滑塊

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屬性 上面說的是不工作的鏈接。 所以，當一個鏈接可以在描述目前被賦予它是相對 提到

等什麼真正做到這一點是一款滑蓋我工作的建立自己的網站

Answer 1

使用單引號以上與寬度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> 

Answer 2

//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); 

更換爲高度從左到右效果

標題幻燈片