Php Manşet Haber Slider

Resimde gördüğümüz gibi bir resimli manşet haberi gereci yapmak için ilk olarak vermiş olduğum php kodunda olduğu gibi ilgili bilgileri veritabanından yada manuel olarak html etiketlerinde karşılık gelen alanlara yerleştiriyoruz.

<?PHP
$sql =  "SELECT title, img_src, ID, link FROM haberler";

$arr = selectQuery($sql);
if(is_array($arr)) {
?>
<div>

<?PHP
$i = 1;
foreach($arr as $var) {
$title = $var[0];
$img_src = $var[1];
$ID = $var[2];
$link = $var[3];
if($title != NULL && strlen($title) > 0) {

?>
<div id="img_<?PHP echo "$i" ?>" style="display: none;">
<a href="#">
<img border="0" width="350" height="190" src="<?PHP echo "$img_src" ?>" >
<div>

</div>
<div>    <a href= "#s"><?php echo "$title" ?></a></div>
</a>
</div>
<?PHP
$i++;
}
}
?>
</div>
<div>
<ul>
<?PHP
$i = 1;
foreach($arr as $var) {
$title = $var[0];
$img_src = $var[1];
$ID = $var[2];
if($title != NULL && strlen($title) > 0) {

?>
<li>
<a href="#<?PHP echo "$ID" ?>" onmouseover="return changePicture(<?PHP echo "$i" ?>);">
<img border="0" width="50" height="40" src="<?PHP echo "$img_src" ?>">
<span><?PHP echo "$title" ?></span>
</a>
</li>

<?PHP
$i++;
}
}
?>
</ul>
</div>

<?PHP
echo "<script>changePicture(1);</script>";
}
}
?>

Daha sonra silderımıza şekilini verecek olan style dosyasını aşağıda olduğu gibi oluşturuyoruz ve manşet haberleri çağıracağımız sayfanın head etiketleri arasına yerleştiriyoruz.

.transparent {
background:#000000 none repeat scroll 0 0;

height:30px;
margin-top:160px;
opacity:0.7;
position:absolute;
width:355px;
}
.transparent_title {

margin-top:170px;
position:absolute;
z-index:99;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
}

.manset_pictures {
margin-left:5px;
margin-top:5px;
width:355px;
float:left;
}

* html .manset_pictures {
width:355px;
float:left;
}

.manset_pictures img {
height:190px;
width:355px;
float:left;
}

* html .manset_thumbnails{ float:right;   height: 203px;    width: 200px; z-index: 3; position:absolute;  margin-top:3px;}
.manset_thumbnails{ float:right;  margin-right:3px; margin-top:3px; height: 200px;    width: 200px; z-index: 3; font-family: Arial, Helvetica, sans-serif;}
.manset_thumbnails  li a:link, .manset_thumbnails li a:visited {padding: 5px 2px 4px 2px; display:block; background:black;  height:38px; border-bottom:1px solid #1b1b1b; font-weight: bold; }
.manset_thumbnails li a:hover, .manset_thumbnails li a:active  {padding: 5px 2px 4px 2px;  background:#FDE341; text-decoration:none; color:#000;}
.manset_thumbnails  li a:link.last, .manset_thumbnails li a:visited.last {padding: 5px 2px 4px 2px; display:block; background:black;  height:50px; border-bottom:none;}
.manset_thumbnails li a:hover.last, .manset_thumbnails li a:active.last  { background:#3e0203; text-decoration:none;}
.manset_thumbnails  li a:link.selected, .manset_thumbnails li a:visited.selected {background:#3e0203;}

.manset_thumbnails  li a:link.selected, .manset_thumbnails li a:visited.selected {
background:#3e0203;
}
.manset_thumbnails li a:link img, .manset_thumbnails li a:visited img {padding: 2px 2px 2px 7px;  margin:-3px 8px 0 0px; float:left;}
.manset_thumbnails li a:link.selected img, .manset_thumbnails li a:visited.selected img {}

.manset_thumbnails li  a:hover  img, .manset_thumbnails li a:active  img { text-decoration:none;}

Son iş olarakta resimler üzerinde dinamik olarak gezmemizi sağlayacak olan javascript fonksiyonunu manşet haberler sayfamızın head etiketleri arasına ekliyoruz.

previousItem=-1;

function changePicture(idx)
{
if(previousItem!= -1)
{

document.getElementById("img_" + previousItem).style.display = 'none';

}

document.getElementById("img_" + idx).style.display = 'block';
previousItem=idx;

return false;
}