How to create rollover news section for my website
by Akram kamal
HTML
<div class="homepage-article">
<h2 style="font-size:16px; font-weight:bold;margin-bottom:10px;">Latest Articles</h2>
<article class="post-7689 post type-post status-publish format-standard hentry category-jam-tangan">
<aside class="meta"> <a href="http://www.luxotime.com/author/bwhcom/">
<img alt='' src='http://1.gravatar.com/avatar/94445c057244c885140fdf36e5a61b0b?s=128&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D128&r=G' class='avatar avatar-128 photo' height='128' width='128' /> </a>
<span class="month">May</span>
<span class="day">05</span>
<span class="year">2015</span>
</aside>
<section class="post-content">
<header>
<h3><a href="http://www.luxotime.com/sejarah-mesin-jam-tangan/" rel="bookmark" title="Sejarah Mesin Jam Tangan Salah Satu Perangkat Tertua di Dunia">Sejarah Mesin Jam Tangan Salah Satu Perangkat Tertua di Dunia</a></h3>
<aside class="post-meta">
<ul>
<li class="post-category"> <a href="http://www.luxotime.com/category/jam-tangan/" rel="category tag">Jam Tangan</a>
</li>
<li class="comments"><span>Comments Off</span>
</li>
</ul>
</aside>
</header>
<section class="entry">
<p>Jam tangan saat ini boleh dikatakan menjadi kebutuhan primer bagi sebagian orang. Tuntutan aktivitas yang tinggi dan membutuhkan ketepatan waktu membuat banyak orang sangat membutuhkan jam tangan. Seiring dengan kemajuan teknologi, muncul berbagai macam merk dan kualitas mesin jam tangan yang berbeda-beda. Mesin jam tangan yang digunakan saat ini tidak lepas dari beberapa percobaan sebelumnya. […]</p>
</section>
</section>
<!--/.post-content -->
</article>
<!-- /.post -->
<article class="post-3999 post...
JavaScript
$(function(){
var posts=$(".type-post").hide(),
visible=posts.filter(":first").show()
setInterval(function(){
var index=posts.index(visible)+1
if (!posts[index]) index=0
visible.hide()
visible=posts.eq(index).show()
},6000)
})