javascript横幅没有出现

时间:2014-04-24 15:39:53

标签: javascript jquery html css

我无法弄清楚为什么,它在那里我点击了,现在它不会显示,任何人都能够提供帮助 - 我按照教程制作并将其从我调整尺寸的其他网站复制过来,也许我错过了一些东西 - 唯一改变的是图像的尺寸,我调整了图像链接...

HTML:

<body>

<div class="header">

<div class="headercontent">

<img src="Images/logoandbuttons.png"/>

<!--BANNER CODE-->

<div id="banner">


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">  </script>


<img src="Images/banner1.jpg" class="active" />
<img src="images/banner4.jpg" />
<img src="images/banner2.jpg" />
<img src="images/banner3.jpg" />

</div>

<script type="text/javascript">

$(document).ready(function () {
setInterval(function () {
    //Get current active image
    var active = $('#banner .active');

    // If there is another image(object) left then make that image next
    // If not, go back to the first image of the banner div
    if (active.next().length > 0) var next = active.next();
    else var next = $('#banner img:first');

    //Get the next image ready by modifying the z-index
    next.css('z-index', '2');

    //Fade out the active image, then
    active.fadeOut(1000, function () {
    //Move the active image to the back of the pile, show it and             remove         the active class
    active.css('z-index', '1').show().removeClass('active');
    //Make the next image the active one  
    next.css('z-index', '3').addClass('active');
    });


}, 3000);
});

</script>

<!--END OF BANNER CODE-->

</div>

</div>


</body>


</html>

CSS:

    * {
padding: 0;
margin: 0;
}

.header {
height: 150px;
width: 1920px;
margin-right: auto;
margin-left: auto;
background-color:#000

}

.headercontent {
height: 150px;
width: 950px;
margin-right: auto;
margin-left: auto;  

}

#banner {
position: absolute;
margin-left: auto;
margin-right: auto;
height: 130px;
width: 670px;
margin-top: 10px;
top: -150px;
left: 85px;
}

#banner img {

position:absolute;
z-index:1;
}

#banner img.active {

z-index:3;  
}

0 个答案:

没有答案