How to make banner auto scroll?

Asked By 20 points N/A Posted on -
qa-featured

Hi,

I want to make a banner for my web site with auto scroll option.

What I need is showing three banners in one banner space.

It should be auto scroll both way once and stop displaying top banner.

Please tell me how to create banner auto scroll according to my requirements?

SHARE
Best Answer by Shifflett Laurel
Best Answer
Best Answer
Answered By 0 points N/A #195083

How to make banner auto scroll?

qa-featured

Hallow Scott Broek,

I have confirmed about your requirements.

It is very easy to create such a banner system by using jQuery library function in javascript block.

You can use the css3 properties for this purpose ,but it will not be seemed very nice.

As an expert  web developer I am recommending you the best option: the jQuery Sliding with Fading Effect

I am providing the source code as text file.You have to save it as .html file and the jquery.min file  must be saved as .js  

You can download the jQuery file from here

Then both files should be kept at same folder/Location.then you have to customize yourself as required .Then open it by browser For further suggestion please contact with expert web developer [email protected]

Thank You

Shifflett Laurel 

Answered By 0 points N/A #195085

How to make banner auto scroll?

qa-featured

To auto-scrolling or slideshow in HTML page generally developer use <marquee> Tag. By this you can make your text or images or banners auto-scrolling in different directions according to your wish.

For continuous Scrolling Banners (Right to Left) use this code:

<marquee behavior="scroll" direction="left"><img src="C:/Banner/banner1.gif" width="100" height="100" alt=" banner1" /></marquee>

For control Speed of Marquee use:

1. Slow:  

<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee>

2. Medium:

<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee>

3. Fast:

<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>

Use this code for many banners to scroll:

<divid="container">

    <header>

        <h1>Animated Photo Banner</h1>

        <p>Lorem ipsum dolor…</p>

    </header>

     

    <!– Each image is 350px by 233px –>

    <divclass="photobanner">

        <imgclass="first"src="image-1.gif"alt="">

        <imgsrc="image-2.gif"alt="">

        <imgsrc="image-3.jpg"alt="">

        <imgsrc="image-4.png"alt="">

        <imgsrc="image-5.gif"alt="">

        <imgsrc="image-6.jpg"alt="">

        <imgsrc="image-1.jpg"alt="">

        <imgsrc="image-2.jpg"alt="">

        <imgsrc="image-3.jpg"alt="">

        <imgsrc="image-4.gif"alt="">

    </div>

</div>

To see jquery code gets my attachment.

Login/Register to Answer

Related Questions