Using Marquee in HTML

Horizontal Marquee – Used for making a sliding text from left to right or right to left.

<marquee direction="left" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="0">

Hey, its great.

</marquee>

Description of attributes:

“direction” : - specifies the direction of the scroll. ‘left’, ‘right’ for Horizontal Marquee and ‘up’, ‘down’ for vertical  scrolling.

“scrollamount” : - specifies the speed of scrolling.

“scrolldelay”: - for delay between repetition.

“onmouseover” calls the inbuilt javascript function ‘this.stop()’ for stopping the scrolling when mouse is over the block.

“onmouseout” calls the inbuilt javascript function ‘this.start()’ for again starting the scrolling when mouse is moves out of the block.

Vertical Marquee – It is used for making auto-scroll of blocks (Ex. News blocks). The following script automatically scrolls the block’s content from down to up direction. It eliminates the overhead of JavaScript.

<marquee direction="up" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();" height="100px;" style=="width:100px;"   scrolldelay="0">

Line 1<br />

Line 2<br />

Line 3<br />

Line 4<br />

Line 5<br />

Line 6<br />

Line 7<br />

Line 8<br />

Line 9<br />

Line 10<br />

</marquee>

Automatic Image Slideshow using JavaScript/JQuery

The following is a simple script used to make slideshow of images through JavaScript/JQuery. Through this, the overhead of flash can be easily removed.

Download: Source Code

<html>

<head>

<!-- 'jquery-1.7.2.js' can be downloaded from Internet. Contains basic Javascript Libraries -->

<script language="javascript" src="jquery-1.7.2.js"></script>

<!-- Slideshow javascript code starts -->

<script type="text/javascript">

// An array of images

var imgs = ["image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg"];

// cnt contains the total number of images.

var cnt = imgs.length;

//function runs on page load. It runs Slider() function in every 3 seconds

$(function() {

           setInterval(Slider, 3000);

     });

     //Slider() function fades out the previous image slowly and fades in the next image.

function Slider() {

//The src attribute of <img> with id "imageSlide" changes to the next image name with fading effect.

     $('#imageSlide').fadeOut("slow", function() {

     $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");

     });

}

</script>

<title> Untitled </title>

</head>

<body>

<!-- It contains the image with image5.jpg as the initial Image. -->

<img id="imageSlide" alt="" src="image5.jpg" />

</body>

</html>