[Basic Web Design] Part 6 - Styling web content (Highlight)

6For this highlight, I'll apply simple image sideshow using jQuery.

First, include j query to your page, paste this code on <head> tag :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
Put the image on the highlight section :

<section id='highlight'>
<!--Highlight-->
<img src="images/slide1.png" width="950" height="300">
<img src="images/slide2.png" width="950" height="300">
<img src="images/slide3.png" width="950" height="300">
</section>
Give it style, put this on the <style> tag :

#highlight img { position:absolute; left:0; top:0; }
Lastly, put this script on the <head> tag :

<script>
$(function(){
    $('#highlight img:gt(0)').hide();
    setInterval(function(){$('#highlight :first-child').fadeOut().next('img').fadeIn().end().appendTo('#highlight');}, 3000);
});
</script>
Done!

Write by Arafa Daming
Labels: