Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Member
    Join Date
    Aug 2014
    Posts
    88
    Member #
    40011
    Liked
    2 times

    JavaScript Picture Slideshow Assignment

    Picture slideshow of possible destinations (4 or 5 images) the slideshow should start automatically when the page loads. How would I do this exactly in JavaScript for Dreamweaver CS6? This animation has to be done in the header background of my website.

    Here's my code need help to finish it so it can work.





    Source Code


    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Vacation Website</title>

    <!--[if It IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->

    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/vacation.js"></script>
    </head>



    <body>


    <div id="wrapper"><!--This will help center the page-->


    <header> <a href="javascript:gotoshow()"><img src="miami2.jpg" name="slide" border=0 width=900 height=184></a>
    <script>
    <!--

    //configure the paths of the images, plus corresponding target links
    slideshowimages("miami2.jpg","australia2.jpg","ven ice2.jpg","lasvegas.jpg")
    slideshowlinks("file:///C:/Users/James/Desktop/Vacation%20Website/images/miami2.jpg","file:///C:/Users/James/Desktop/Vacation%20Website/images/australia2.jpg","file:///C:/Users/James/Desktop/Vacation%20Website/images/venice2.jpg","file:///C:/Users/James/Desktop/Vacation%20Website/images/lasvegas.jpg")

    //configure the speed of the slideshow, in miliseconds
    var slideshowspeed=2000

    var whichlink=0
    var whichimage=0
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=slideimages[whichimage].src
    whichlink=whichimage
    if (whichimage<slideimages.length-1)
    whichimage++
    else
    whichimage=0
    setTimeout("slideit()",slideshowspeed)
    }
    slideit()

    //-->
    </script> </header>

    <nav>Home | Flights | Hotels | Cruises | Vacation Packages | Contact Us</nav>
    <br>

    <section id class="sec1">

    <h1> </h1>

    <p>this is where rollover image will be </p>

    </section>

    <section id class="sec2">

    <h1> </h1>

    <p>this is where rollover image will be </p>

    </section>

    <section id class="sec3">


    <p>this is where rollover image will be </p>
    </section>

    <article>
    <h2>Featured Hotel Deals</h2>

    <p>

    The perfect vacation starts with the perfect place to stay. Browse our selection of cheap hotels to find the five-star spots or intimate inns of your dreams. We'll even let you compare prices on your favorites and see how the hotels rank with fellow travelers. No matter if you are looking for a place to crash or seek the top-notch amenities for your getaway, Expedia has what you are looking for.</p>

    <p>Niagara Falls Hotels
    Hotel Deals in Banff
    Popular Hotels in Calgary
    Ottawa Hotel Destinations
    Toronto Hotel Deals
    Hotels in Vancouver
    Top Montreal Hotels
    Popular Edmonton Hotels</p>


    <p>Calling all fliers: If you're searching for inexpensive airline tickets, Expedia.ca is the place to be. Jet off to any corner of the globe with our unbeatable selection of flights and airfare. Search for flights by time or carrier, look for the cheapest or most luxurious airline. Expedia has you covered for your next take-off wherever your destination may be.</p>

    <p>Cheap Flights to Hawaii
    Flights to Las Vegas
    Cheap Tickets to London
    Flight to Calgary
    New York Flights
    Cheap Tickets to Toronto
    Flights to Vancouver
    Orlando Flight Deals</p>

    <h2>Cheap Flights</h2>

    <img src="images/plane.jpg" width="335" height="189" alt="plane">
    <p>Everyone needs an occasional escape. Uncover a world of vacations with Expedia's packages and trip ideas. From secluded getaways to all inclusive vacations, we offer up-to-date deals on the most popular trips. No matter if you prefer to vacation in the latest hot spot or wish to hide in deep wilderness, Expedia offers the perfect fit for your vacation style.</p>

    <h2>Cheap Last Minute Vacations & All Inclusive Vacation Packages</h2>

    <p>Cheap last minute vacations combine excitement, spontaneity, unexpected discovery, and best of all, savings. SellOffVacations.com offers a full range of deals on cheap last minute vacations and all inclusive vacation packages for travellers with flexibility and a sense of adventure. Choose from a wide selection of great deals to some of the most popular vacation destinations and enjoy an affordable dream vacation. Take advantage of our last minute vacation search option or check out some of our best last minute vacation deals below and discover the thrill of travel on the fly. If you've got the urge to get away now, SellOffVacations.com can help you make it happen for the best price.</p>

    <p>Cuba Vacations
    Mexico All Inclusive
    New York Vacations
    Las Vegas Vacations
    Costa Rica Vacations
    Hawaii vacations
    Jamaica All Inclusive
    Dominican Republic All Inclusive</p>

    <h2>Vacation Packages</h2>

    <p>Need to rent a car? We've got you covered. With Expedia's car rental deals, you can drive from coast to coast without breaking the bank. Get ready to hit the road. Enjoy the freedom of being able to stop and smell the roses on your road trip – no matter if you are driving to visit relatives in the next town over or somewhere across the country. Expedia has rental cars available at the locations most convenient for you.</p>

    <p>Toronto Car Rental
    Ottawa Car Rental
    Car Rental Montreal
    Cheap Car Rental Las Vegas
    Car Rental in Vancouver
    Car Rentals Calgary
    Rental Cars Edmonton
    Halifax Rent a Car</p>

    <h2>Deals on Car Rental</h2>

    <p>Explore the world's most unforgettable ports-of-call with our selection of cruises, packages, and cruise deals. Thanks to Expedia, sailing the high seas has never been easier. Make discovering the high seas your new tradition. With Expedia's unbeatable prices anyone can afford to become a seafarer. Peruse the myriad of cruises available for any occasion and book your next journey today.</p>

    <h2> Popular Cruise Destinations </h2>

    <p>Alaska Cruises
    Panama Canal Cruise
    Cruises to Hawaii
    Bermuda Cruise Deals
    Repositioning Cruises
    Cruise Caribbean
    Cruises in South America
    Cruise Destinations in Europe</p>
    </p>

    <h2>Cheap Cruises, Deals & Discounts</h2>


    <p>Use our handy search engine to find a broad selection of cheap cruises or call and speak to one our SellOffVacations.com travel representatives.</p>





    <h2>Travel Insurance Canada</h2>


    <p>Stay protected when you travel with our Manulife Travel Insurance plans. </p>


    <h2>Why Purchase Travel Insurance?</h2>

    <p>There are many excellent reasons to purchase travel insurance when travelling abroad. Consider these cases when deciding on travel insurance for Canadians:</p>
    <ul>
    <li>Your credit card coverage may be limited and may not protect your entire travel costs and investment</li>
    <li>Your group policy through your workplace may not cover all your insurance needs</li>
    <li>Your government health insurance plan will not protect you when travelling abroad</li>
    <li>You may need coverage for a variety of situations which are not covered by your current insurance plan</li>

    </ul>



    <footer> <h4> 2014 Enjoy Relax JMB Travel, Inc. All rights reserved.</h4>
    </footer>













    </div><!--Ends Wrapper-->
    </body>
    </html>



    CSS Code



    /* CSS Document */

    h1,h2,h3,h4,h5,h6,body,header,footer,nav,section,a rticle,html,div,video,audio { }



    * {
    padding-right: 20px;
    padding-left: 20px;
    margin-right: 20px;
    margin-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    }
    #wrapper {
    background-color: #09F;
    }


    header {
    background-color: #09F;
    height: 10em;
    background-image: url(../images/miami2.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;


    }


    header h1{
    }
    nav {
    background-color: #FFF;
    float: left;
    }




    body {
    background-color: #0CF;
    }


    article {
    background-color: #09F;
    }



    footer {
    background-color: #09F;
    }
    footer h4 {
    text-align: center;
    }









    JS Code





    var Image_slide = new Array("miami2.jpg", "australia2.jpg", "venice2.jpg","lasvegas.jpg");// image container
    var Img_Length = Image_slide.length; // container length - 1
    var Img_current = 0

    function slide() {
    if(Img_current >= Img_Length) {
    Img_current = 0;
    }
    document.slideshow.src = Image_slide[Img_current];
    Img_current++;
    }
    function auto(){
    setInterval(slide, 1000);
    }
    window.onload = auto;
    Last edited by James92; Nov 18th, 2014 at 09:56 AM. Reason: code

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 09:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com