Jquery Otomatik Resim Slayt Galerisi

by Mustafa Kaba

HTML

<style type="text/css">
.container1{width:660px;margin:0 auto;padding:0;}
.folio_block{position:absolute;left:50%;top:50%;margin:-140px 0 0 -395px;}
.main_view{float:left;position:relative;}
.window{height:240px;width:660px;-moz-box-shadow:0 0 5px #303030;-webkit-box-shadow:0 0 5px #303030;box-shadow:0 0 5px #303030;border:1px solid #000;margin-top:15px;overflow:hidden;position:relative;}
.image_reel{position:absolute;top:0;left:0;}
.image_reel img{float:left;}
.paging_btrix{position:absolute;bottom:10px;right:-7px;width:178px;height:47px;z-index:100;text-align:center;line-height:40px;background:url(http://4.bp.blogspot.com/_ELUIRQESuk4/TFw-m2eaQlI/AAAAAAAAADg/KQbHMNM6wOQ/s320/paging.png) no-repeat;display:none;}
.paging_btrix a{text-decoration:none;color:#fff;padding:5px;}
.paging_btrix a.active{font-weight:700;background:#920000;border:1px solid #610000;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}
.paging_btrix a:hover{font-weight:700;}
</style>
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://i.imgur.com/zpMYslH.jpg"><img src="http://i.imgur.com/zpMYslH.jpg" alt="" /></a>
<a href="http://i.imgur.com/lGfnlY4.jpg"><img src="http://i.imgur.com/lGfnlY4.jpg" alt="" /></a>
<a href="http://i.imgur.com/GvuMuIK.jpg"><img src="http://i.imgur.com/GvuMuIK.jpg" alt="" /></a>
<a href="http://i.imgur.com/RD3czcU.jpg"><img src="http://i.imgur.com/RD3czcU.jpg" alt="" /></a>
<a href="http://i.imgur.com/SOxv4nd.jpg"><img src="http://i.imgur.com/SOxv4nd.jpg" alt="" /></a>
<a href="http://i.imgur.com/PCAFuXJ.jpg"><img src="http://i.imgur.com/PCAFuXJ.jpg" alt="" /></a>
</div>
</div>
<div class="paging_btrix">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>
<a href="#" rel="6">6</a>
</div>
</div>
</div>
<script type="text/javascript"...