帶固定文本覆蓋的JQuery橫幅旋轉器

我目前在一個網站內有一個超級簡單的JQuery橫幅滑塊，它可以像我預期的那樣工作。帶固定文本覆蓋的JQuery橫幅旋轉器

唯一的問題是，我希望在幻燈片上覆蓋文字，並保持固定位置，而圖像在幻燈片後面滑入和滑出。

下面的代碼是整個網頁，所有的JQuery都在外部鏈接。

的影響我追求的是：

enter image description here

其實做的div持有的文字是沒有問題的，它得到它的真正坐下了幻燈片和永久性顯示，在目前其上方幻燈片。

<!DOCTYPE html> 
<head> 
<title>Matt Salmon Film & Photography</title> 
<link rel="stylesheet" type="text/css" href="Style.css"> 
<link href='http://fonts.googleapis.com/css?family=Offside' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'> 

<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'scrollRight', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
       speed: 750, 
       timeout: 5000 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="header"> 
    <div id="headerWrapper"> 
     <div id="logo"> 
     <img src="Images/MattLogo.png"> 
     </div> <!-- End of logo --> 
     <nav> 
     <ul> 
      <li><a href="index.html">about me</a></li> 
      <li><a href="portfolio.html">portfolio</a></li> 
      <li><a href="projects.html">projects</a></li> 
      <li><a href="contact.php">contact me</a></li> 
     </ul> 
     </nav> 
    </div> <!-- End of headerWrapper --> 
    </div> <!-- End of header --> 
    <div id="wrapper"> 
    <div id="bannerCaption"> 
     Professional Photography & Film 
     <div class="slideshow"> 
     <img src="Images/BannerPic2.png" width="1000" height="400" /> 
     <img src="Images/BannerPic1.png" width="1000" height="400" /> 
     </div> <!-- End of banner --> 
    </div> <!-- End of bannerCaption --> 
    </div> <!-- End of wrapper --> 
</body> 
<footer> 
</footer> 
</html>

CSS這涉及到幻燈片：

.slideshow {width: 1000px; margin: 0 auto; float:left; } 
.slideshow img { background-color: #eee; } 

#bannerCaption 
{ 
position: absolute; 
}

來源

2013-07-08 Matt Meadows

你有什麼在style.css文件？ – Stefan

更新的問題:) –

代碼格式是你的朋友... – relic

我不得不稍微改變你的標記，因爲目前它不是很好，所以你需要做一些更多的工作。

jsFiddle（向右滾動）

#wrapper { 
    width:1000px; 
    position:relative; 
} 
#bannerCaption { 
    position: absolute; 
    z-index:99; 
    right:0; 
    top:100px; 
}

來源

2013-07-08 16:17:58 Stefan

我想出了相同的解決方案。這裏是[小提琴]（http://jsfiddle.net/5zxuQ/），其中的標題已經格式化爲 –

經過一番修改之後，我剛纔提到了你的建議。雖然我在加價時遇到了麻煩，並且您的小提琴與我擁有的一起工作！ Thankyou :) –

在你的CSS添加

#bannerCaption{ 
    z-index:1; 
}

而且你的文字會出現在上面。

來源

2013-07-08 16:11:51 Olof

帶固定文本覆蓋的JQuery橫幅旋轉器

回答

相關問題