背景滑块问题答案

【问题标题】：Background Slider Issue背景滑块问题
【发布时间】：2012-05-21 02:33:32
【问题描述】：

我正在尝试在此处实现 http://jsfiddle.net/aVUxD/3/ http://22twenty.com/wallspace/

在此处创建 A way to fade in the background on load? html:

<!DOCTYPE html>
<html lang="en">
<!--To Do: -->
<!-- list menu logo size  -->
<!--all other pages -_- -->
  <head>
    <meta charset="utf-8">
    <title>Wall Space Gallery And Framing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
  <link rel="stylesheet" href="css/style.css">
<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->
  </head>
  <body>



<header>
                <div id="wrap">
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg" />
</div>

                    <div class="logo">
                                        <a id="single_image" href="index.html"><img src="img/logo.png" alt=""/></a>
                    </div> 

                    <ul id="navigation">
                        <li id="active"><a href="index.html" alt="home" >Home</a></li>
                        <li><a href="exhibitions.html" alt="Exhibitions"> Exhibitions</a></li>
                        <li><a href="artists.html" alt="Artists"> Artists</a></li>
                        <li><a href="contact.html" alt="Contact"> Contact</a></li>
                    </ul>


</header>


                <div id="content">


                </div>

<footer>
    <div id="copyright">
        <p>Copyright &copy Wall Space Gallery And Framing 2012</p>
    </div>

    <div id="twenty">
        <p>Website By <a href="http://www.22twenty.com">22Twenty</a> Web Solutions</p>
    </div>    
</footer>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.min.js"></script>
<script>
$(document).ready(function(){
    $('img').hide();

function anim() {
    $("#wrap img").first().appendTo('#wrap').fadeOut(2000);
    $("#wrap img").first().fadeIn(2000);
    setTimeout(anim, 4000);
}
anim();

)};
</script>
</body>
</html>

css 很长，但你可以在这里找到查看源代码：http://22twenty.com/wallspace/

应该在 chrome 上工作，不确定其他浏览器

希望有人能帮忙！

谢谢

丹佛

【问题讨论】：

标签： jquery image background slider

【解决方案1】：

背景淡入淡出似乎不适用，因为您在#wrap 中使用前景图像。

根据我对您想要什么的理解，我得到了一些工作here。

fiddle 中的 css 在级联中低于样式表中的 css，因此优先。调整标题高度以适合您的图像。 #wrap 的 overflow:hidden 如果所有图像的大小都相同，则不需要 - 示例中的那些不是。

【讨论】：

并获得导航和菜单？绝对位置似乎没有做到这一点
jsfiddle.net/BpjR8/6 - 布局很垃圾 - 你需要改进 CSS，但原则似乎是正确的 - 即。徽标和导航栏覆盖交叉淡入淡出的图像。