How to make banner auto scroll?

Asked By Scott Broek 20 points N/A Posted on - 12/16/2012

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?

• Status: Open
• Question Views: 1056
• Answer Count: 2
• Vote Up 0 Vote Down

• Answer Accepted: Yes
• Question Category: Feature tips

Best Answer by Shifflett Laurel

Go To Solution

Best Answer

Best Answer

Answered By Shifflett Laurel 0 points N/A #195083

How to make banner auto scroll?

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 

About Shifflett Laurel

Questions
2

Answers
154

Best Answers
78

• Vote Up 0 Vote Down

• Posted on - 01/19/2013
• Question Category: Feature tips

Answered By Leslie Mark 0 points N/A #195085

How to make banner auto scroll?

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.

About Leslie Mark

Questions
2

Answers
38

Best Answers
19

• Vote Up 0 Vote Down

• Posted on - 01/19/2013
• Question Category: Feature tips