Yardım Merkezi >

Jquery slider “Feature List”

Wiki Sitesi : http://jqueryglobe.com/article/feature-list

Demo : /uygulama/featurelist/

Download : /uygulama/fea…..list.zip

Zaman (hız) ayarı “jquery.featureList-1.0.0.js” adlı dosyanın 39. satırında aşağıdaki 1000; değerinden yapılıyor.

options.transition_interval = options.transition_interval || 1000;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.featureList-1.0.0.js"></script>

Girişler/Çıkışlar class/id slide başlama belirlemesi

<script language="javascript">
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li a"), {
transition_interval : 0,
start_item : 0
} );
});
</script>

<div id="feature_list">
<ul id="output">
<li><a href="#"><img src="images/banner1.png" alt="" /></a></li>
<li><a href="#"><img src="images/banner2.png" alt="" /></a></li>
<li><a href="#"><img src="images/banner3.png" alt="" /></a></li>
</ul>
<ul id="tabs">
<li><a href="javascript:;"><h3>banner 1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mi mauris.</p></a></li>
<li><a href="javascript:;"><h3>banner 1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mi mauris.</p></a></li>
<li><a href="javascript:;"><h3>banner 1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mi mauris.</p></a></li>
</ul>
</div>
<div id="feature_list">
<ul id="output"><li><a href="#"><img src="images/banner1.png" alt="" /></a></li><li><a href="#"><img src="images/banner2.png" alt="" /></a></li><li><a href="#"><img src="images/banner3.png" alt="" /></a></li></ul>
<ul id="tabs"><li><a href="javascript:;"><h3>banner 1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mi mauris.</p></a></li><li><a href="javascript:;"><h3>banner 1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mi mauris.</p></a></li><li><a href="javascript:;"><h3>banner 1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mi mauris.</p></a></li></ul>
</div>

div#feature_list { width:932px; position:relative; }
ul#tabs { margin:0; padding:0; list-style-type:none; width:262px; position:absolute; right:0;}
ul#tabs li { padding:1px 0 0px 0; clear:both;}
ul#tabs li a { display:block; float:left; width:235px; height:69px; padding:12px 0 0 27px; background:url(images/a.png) right no-repeat; outline:none;color:#999999; text-decoration:none;}
ul#tabs li a.current { background:url(images/ahover.png) right no-repeat;}
ul#tabs li a h3 { margin:0 auto; padding:0px 0 0 0; font-size:15px; width:206px; background:url(images/h3bg.png) bottom no-repeat; height:20px; color:#FF6600;}
ul#tabs li a p { margin:0 auto; padding:5px 0 0 0; width:206px; font-family:Tahoma; font-size:11px;  }
ul#output { margin:0; padding:1px 0 0 0; list-style-type:none; position:absolute; left:0;}
ul#output li { position:absolute;}
ul#output li a { outline:none; position:absolute;}
ul#output li a img { border:none;}

Kategori : "Arayüz Geliştirme"
İlgili aramalar : , , .


Yorum Bırakın

İsim

Mail (gizli kalacak)

Görüşünüz ;







© 2006-2014 Aktif Bilişim İnternet Hizmetleri