0

I currently have a super simple JQuery banner slider within a website that works as I expected it to.

The only issue that I had hoped to have a text overlay over the slideshow, that stays fixed in position, while the images slide in and out behind it.

The code below is the entire web page, all JQuery is linked in externally.

The effect i'm after is:

enter image description here

Actually making the divs to hold the text is no problem, its getting it to actually sit over the slideshow and display permanently, at current its above the slideshow.

<!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 That relates to the slideshow: 

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

#bannerCaption
{
position: absolute;
}
4

2 回答 2

2

我不得不稍微改变你的标记，你需要做更多的工作，因为目前它不是很好。

jsFiddle（向右滚动）

#wrapper {
    width:1000px;
    position:relative;
}
#bannerCaption {
    position: absolute;
    z-index:99;
    right:0;
    top:100px;
}
于 2013-07-08T16:17:58.443 回答
0

在你的 CSS 添加

#bannerCaption{
    z-index:1;
}

您的文字将位于顶部。

于 2013-07-08T16:11:51.900 回答