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?
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Â
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.
