HTML:
<html>
<head>
<title><?php the_title(); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slide2').hide();
$('#slide3').hide();
$('#slide4').hide();
$('#slide5').hide();
});
setInterval(function(){
$('#slide1').fadeOut();
$('#slide2').fadeIn();
}, 2000);
setInterval(function(){
$('#slide2').fadeOut();
$('#slide3').fadeIn();
}, 2000);
setInterval(function(){
$('#slide3').fadeOut();
$('#slide4').fadeIn();
}, 2000);
setInterval(function(){
$('#slide4').fadeOut();
$('#slide5').fadeIn();
}, 2000);
setInterval(function(){
$('#slide5').fadeOut();
$('#slide1').fadeIn();
}, 2000);
</script>
</head>
<body>
<div id="header">
<?php get_header(); ?>
</div>
<div id="body">
<div id="wrap">
<img src="slide1.jpg" id="slide1" width="960" height="375" alt="image 1" class="is-showing" />
<img src="slide2.jpg" id="slide2" width="960" height="375" alt="image 2" />
<img src="slide3.jpg" id="slide3" width="960" height="375" alt="image 3" />
<img src="slide4.jpg" id="slide4" width="960" height="375" alt="image 4" />
<img src="slide5.jpg" id="slide5" width="960" height="375" alt="image 5" />
</div>
<div id="blankline">
</div>
<div id="why">
</div>
<div id="information">
</div>
</div>
<div id="footer">
<?php get_footer(); ?>
</div>
HTML:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
}
p {
margin: 0;
}
#header {
margin: 0;
height: 125px;
width: 100%;
background: #fff;
border: 1px solid #000;
float: left;
}
.logo {
margin-top: 20px;
margin-left: 5%;
height: 85px;
width: 30%;
border: 1px solid #000;
float: left;
}
h1 {
font-family: Verdana;
font-size: 40px;
color: #000;
}
.navmenu {
margin-left: 45%;
margin-top: 40px;
height: 70px;
width: 50%;
padding: 0;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.navmenu ul li {
float: left;
line-height: 50px;
width: 20%;
display: block;
font-family: Verdana;
text-align: center;
border-bottom: 2px solid #999;
}
.navmenu ul li:first-child {
border-bottom: 2px solid #FF0000;
}
.navmenu ul li a {
color: #000;
text-decoration: none;
}
.navmenu ul li:hover {
border-bottom: 2px solid #FF0000;
}
#body {
width: 100%;
}
#wrap {
margin: 0;
height: 500px;
width: 100%;
background: #999;
overflow: hidden;
}
#wrap img {
display: none;
}
#wrap .is-showing {
display: inline;
}
#blankline {
margin: 0;
height: 75px;
width: 100%;
background: #333;
}
#why {
margin: 0;
height: 300px;
width: 100%;
background: #999;
}
#information {
margin: 0;
background: #fff;
width: 100%;
height: 350px;
}
#footer {
margin: 0;
width: 100%;
background: #000;
height: 200px;
}Dit is een HTML en een CSS bestand voor een Wordpress theme.
Alleen ik heb een probleempje met de slideshow.
Ik wil dat ie van #slide1 naar #slide2 gaat en van #slide2 naar #slide3 en zo door en dan allemaal opnieuw.
Wat de slideshow nu doet is dat ie van 1 naar 1 gaat.
Wie weet hoe ik dit moet fixen?
