Create a nice slideshow with the jQuery library, for a simple scrolling images.
Tested in IE7, IE8, Firefox, Opera, Safari and Chrome.
Code Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<title>Slide show jquery (jQuery Headline Changer) - Depot Webdesigner</title>
</head>
<body>
<h1 align="center">jQuery Headline Changer</h1>
<div id="content">
<ul class="infoPanel">
<li> <a href="#url" class="infoLink current"><img alt="" src="images/image1.jpg" style="opacity: 1;"> <span>Football latest news</span>
<p>Duis faucibus neque dui.Duis faucibus neque dui.</p>
</a>
<div style="display: block;"> <img alt="" src="images/image1.jpg"> </div>
</li>
<li> <a href="#url" class="infoLink"><img alt="" src="images/image2.jpg" style="opacity: 0.8;"><span>Test information</span>
<p>Duis faucibus neque dui.Duis faucibus neque dui.</p>
</a>
<div style="display: none;"> <img alt="" src="images/image2.jpg"> </div>
</li>
<li> <a href="#url" class="infoLink"><img alt="" src="images/image3.jpg" style="opacity: 0.8;"><span>Rugby cup special</span>
<p>Duis faucibus neque dui.Duis faucibus neque dui.</p>
</a>
<div style="display: none;"> <img alt="" src="images/image3.jpg"> </div>
</li>
</ul>
</div>
</body>
</html>
Code Css
#content {
clear:both;
position:relative;
border:1px solid #acacac;
width:750px;
margin:25px auto;
}
.infoPanel {
padding:0;
margin:0;
list-style:none;
width:750px;
height:270px;
background:#333;
position:relative;
font-family:verdana, sans-serif;
}
.infoPanel li {
width:271px;
float:left;
clear:left;
height:90px;
color:#fff;
}
.infoPanel li a.infoLink {
display:block;
width:271px;
height:90px;
overflow:hidden;
text-decoration:none;
border:0;
color:black;
font-size:13px;
}
.infoPanel li a.infoLink p {
color:black;
font-size:11px;
display:block;
width:200px;
text-decoration:none;
margin-top:3px;
padding:0;
}
.infoPanel li a.current {
background:url(../images/back.png);
position:absolute;
z-index:1;
}
.infoPanel li {
background:url("../images/back2.png") repeat scroll 0 0 transparent;
}
.infoPanel li a.infoLink img {
display:block;
width:52px;
height:50px;
float:left;
margin:20px 10px 0 20px;
border:1px solid #888;
}
.infoPanel li a.infoLink span {
display:block;
padding:20px 20px 0 0;
width:240px;
font-weight:bold;
}
.infoPanel li a.current span {
color:white;
font-weight:bold;
}
.infoPanel li div img {
}
.infoPanel li div {
position:absolute;
right:1px;
bottom:0;
width:498px;
height:270px;
background:#333;
display:none;
overflow:hidden;
}
.infoPanel li div a {
color:#6cf;
text-decoration:none;
font-size:13px;
}
Code Javascript
$(document).ready(function() {
$(".infoPanel li a img").fadeTo(1,0.8);
$(".infoPanel li a").eq(0).addClass("current");
$("a.current").next().fadeIn();
$(".infoPanel li a.current img").fadeTo(250,1);
$(".infoLink").mouseover(function() {
if (this.className.indexOf("current") == -1) {
$("a.current").next().fadeOut();
$(".infoPanel li a.current img").fadeTo(1,0.8);
$("a.current").removeClass("current");
$(this).addClass("current");
$("a.current").next().fadeIn();
$(".infoPanel li a.current img").fadeTo(250,1);
}
});
});