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