Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 AUTOMATIC IMAGE SLIDER CONTOH 2 |
| February 21, 2011 Posted by: Fauzie |
Contoh kedua image slider yang menggunakan css/html dan jQuery ialah apa yang dipanggil “auto-playing featured content slider”, di mana ‘content” atau maklumat dimasukkan bersama image. “Interaction” dan “animation” menggunakan jQuery UI library (user interface). Terdapat banyak tutorial yang membincangkan “featured content slider” ini. Walaubagaimana pun kebanyakkannya menggunakan “jQuery Coda Slider plugin”.
Di bawah ini ialah "Live Demo" "featured content slider". Jika anda ingin mencubanya, sila copy & paste kod-kod html/CSS dan jQuery di bawah ini.
Contoh Foto Slider Menggunakan jQuery
Vivistar 3.6" Quad Band Dual SIM slider
Barcelona Plus Quad Dual SIM
Focus Mini Slider
HD Touch Screen GPS
Vivistar 3.6" Quad Band Dual SIM
WIFI, TV, QWERTY with 3.6" touch screen with clear crisp graphics to give a brilliant vewing experience....read moreBarcelona Plus Quad Dual SIM WIFI
The touchscreen cellphone represents the forefront of mobile technology....read moreFocus Mini Slider
One of the Chinese most popular cellphones. It's big on both performance and style....read more6 inche HD Touch Screen GPS
First portable GPS Navigator that comes with DVB-T multi-wonderful-functions....read more<html>
<head>
<style type="text/css">
/***photo slider 2***/
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px; overflow:hidden;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px; height:250px;
overflow:auto;
overflow-x:hidden;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px; text-decoration:none;
color:#333; background:#fff;
line-height:20px; outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .infom{
position:absolute;
bottom:0; left:0;
height:70px;
color:#fff;
font-size:11px;
font-family:Verdana;
padding-left:2px;
background: url('http://demo.webdeveloperplus.com/featured-content-slider/images/transparent-bg.png');
}
#featured .ui-tabs-panel .infom a.hideshow{
position:absolute; font-size:11px; font-family:Verdana; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:0; outline:none; background:#333;
}
#featured .infom h2{
font-size:1.2em; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0; font-weight:normal;
overflow:hidden;
}
#featured .infom p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .infom a{
text-decoration:none;
color:#fff;
}
#featured .infom a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
</style>
</head>
<body>
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/2.jpg" alt="" width="80" height="50" /><span>Lorem ipsum dolor. </span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/5.jpg" alt=""width="80" height="50"/><span>Praesent
Maecenas est </span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/3.jpg" alt="" width="80" height="50" /><span> Morbi malesuada
</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/4.jpg" alt="" width="80" height="50" /><span>Lorem ipsum dolor</span></a></li></ul>
<!-- Content pertama -->
<div id="fragment-1" class="ui-tabs-panel" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/2.jpg" alt=""width="400" height="250" /><div class="infom"><h2><a href="#">Maecenas est erat </a></h2>Morbi malesuada
Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor. ....<a href="#" >read more</a></div></div>
<!-- content kedua -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/5.jpg" alt="" width="400" height="250" /><div class="infom" ><h2><a href="#">Praesent
Maecenas est erat </a></h2>Praesent pellentesque nibh sed nibh. Sed ac libero. Etiam quis libero.
In hac habitasse ....<a href="#" >read more</a></div></div>
<!-- Content ketiga -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/3.jpg" alt="" width="400" height="250" /><div class="infom" ><h2><a href="#">Lorem ipsum dolor
Consectetuer </a></h2>Morbi malesuada
Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor ....<a href="#" >read more</a></div></div>
<!-- Content keempat -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/4.jpg" alt="" width="400" height="250" /><div class="infom" ><h2><a href="#">In hac habitasse
Quisque </a></h2>Fusce rhoncus
Praesent pellentesque nibh sed nibh. Sed ac libero. Etiam quis libero. ....<a href="#" >read more</a></div></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</body>
</html>
<head>
<style type="text/css">
/***photo slider 2***/
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px; overflow:hidden;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px; height:250px;
overflow:auto;
overflow-x:hidden;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px; text-decoration:none;
color:#333; background:#fff;
line-height:20px; outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .infom{
position:absolute;
bottom:0; left:0;
height:70px;
color:#fff;
font-size:11px;
font-family:Verdana;
padding-left:2px;
background: url('http://demo.webdeveloperplus.com/featured-content-slider/images/transparent-bg.png');
}
#featured .ui-tabs-panel .infom a.hideshow{
position:absolute; font-size:11px; font-family:Verdana; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:0; outline:none; background:#333;
}
#featured .infom h2{
font-size:1.2em; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0; font-weight:normal;
overflow:hidden;
}
#featured .infom p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .infom a{
text-decoration:none;
color:#fff;
}
#featured .infom a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
</style>
</head>
<body>
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/2.jpg" alt="" width="80" height="50" /><span>Lorem ipsum dolor. </span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/5.jpg" alt=""width="80" height="50"/><span>Praesent
Maecenas est </span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/3.jpg" alt="" width="80" height="50" /><span> Morbi malesuada
</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/4.jpg" alt="" width="80" height="50" /><span>Lorem ipsum dolor</span></a></li></ul>
<!-- Content pertama -->
<div id="fragment-1" class="ui-tabs-panel" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/2.jpg" alt=""width="400" height="250" /><div class="infom"><h2><a href="#">Maecenas est erat </a></h2>Morbi malesuada
Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor. ....<a href="#" >read more</a></div></div>
<!-- content kedua -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/5.jpg" alt="" width="400" height="250" /><div class="infom" ><h2><a href="#">Praesent
Maecenas est erat </a></h2>Praesent pellentesque nibh sed nibh. Sed ac libero. Etiam quis libero.
In hac habitasse ....<a href="#" >read more</a></div></div>
<!-- Content ketiga -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/3.jpg" alt="" width="400" height="250" /><div class="infom" ><h2><a href="#">Lorem ipsum dolor
Consectetuer </a></h2>Morbi malesuada
Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor ....<a href="#" >read more</a></div></div>
<!-- Content keempat -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""><img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/4.jpg" alt="" width="400" height="250" /><div class="infom" ><h2><a href="#">In hac habitasse
Quisque </a></h2>Fusce rhoncus
Praesent pellentesque nibh sed nibh. Sed ac libero. Etiam quis libero. ....<a href="#" >read more</a></div></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</body>
</html>
Kembali kepada | Archives →
Sebarang komen dan pertanyaan, sila klik butang di bawah ini:
