Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript CSS HTML , +
Hi all,
 
I am a complete novice to web development however I am trying to create a web page with an automatic slide show. I have read many articles on Google and can't for the life of me get it to work properly.
 
I am after a slide show that has 3 images at 760 x 240 and that has a fade transition.
 
Could anyone please help me out by putting the correct slide show code in place?? My current code is below - Please excuse it if it looks a mess haha.
 
Many Thanks,
 
Kyle
 

HTML
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="Home.css" rel="stylesheet" type="text/css" />
        <title>TGCPC - Home</title>
 

 
    </head>
    <body>
        <h1><center></center></h1>
        <div class="Home">
            <div class="Home_header_image"></div>
            <div class="Home_middle"></div>
            <div class="lower">
                <div>
                    <h1></h1>
                </div>
            </div>
            <div class="Home_content1">
                <div>
                    <h2></h2>
                    <h2></h2>
                    <h2></h2>
                    <h2></h2>
                    <p><center></center> </p>
                </div>
            </div>
            <div class="Home_menuHome"><a class="Home_menuHomeLink" href="Home.htm">HOME</a></div>
            <div class="Home_menuAboutUs"><a class="Home_menuAboutUsLink" href="AboutUs.htm">ABOUTUS</a></div>
            <div class="Home_menuProducts"><a class="Home_menuProductsLink" href="Products.htm">PRODUCTS</a></div>
            <div class="Home_menuTestimonials"><a class="Home_menuTestimonialsLink" href="Testimonials.htm">TESTIMONIALS</a></div>
            <div class="Home_menuContactUs"><a class="Home_menuContactUsLink" href="ContactUs.htm">CONTACTUS</a></div>
        </div>
    </body>
</html>
 

CSS
 
html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: Calibri, Arial, sans-serif;
    background: #000 url(images/CotswoldWall.jpg) no-repeat;
    color: white;
    background-repeat: no-repeat;
    background-position: top center;
}
a:link {
    outline: 0;
    color: #979797;
    text-decoration: none;
}
a:visited {
    color: #979797;
}
a:hover {
    color: #2E9CE6;
}
a.different {
    color: black;
}
p {
    color: black;
    font-size: 14px;
    text-align: justify;
    padding-left: 10px;
    padding-top: 15px;
}
h1 {
    color: white;
    font-size: 22px;
    padding-top: 35px;
    padding-left: 36px;
    font-weight: 100;
    font-family: Dotum;
}
h2 {
    color: black;
    font-size: 18px;
    padding-top: 15px;
    padding-left: 10px;
    font-weight: normal;
}
.Home {
    width: 900px;
    min-height: 216px;
    margin: 34px auto 0 auto;
    position: relative;
}
.Home_middle {
    background: url(images/TGCPC-Logo.png) no-repeat 67px 55px;
    height: 240px;
    width: 736px;
    margin-top: -800px;
    border-radius: 7px;
    margin-bottom: -20px;
}
.Home_header_image {
    background: #3A3A3C url(images/wooden-path.jpg) no-repeat 70px 160px;
    height: 800px;
    width: 900px;
    margin-top: -85px;
    margin-bottom: -110px;
}
.Home_menuHome {
    position: absolute;
    top: 135px;
    left: 352px;
}
.Home_menuHomeLink:link {
    background: url(images/Home.png) no-repeat left top;
    width: 62px;
    height: 20px;
    display: block;
    text-indent: -10000px;
}
.Home_menuHomeLink:hover {
    background: url(images/Home.png) no-repeat left bottom;
}
.Home_menuAboutUs {
    position: absolute;
    top: 135px;
    left: 410px;
}
.Home_menuAboutUsLink:link {
    background: url(images/AboutUs.png) no-repeat left top;
    width: 100px;
    height: 22px;
    display: block;
    text-indent: -10000px;
}
.Home_menuAboutUsLink:hover {
    background: url(images/AboutUs.png) no-repeat left bottom;
}
.Home_menuProducts {
    position: absolute;
    top: 135px;
    left: 504px;
}
.Home_menuProductsLink:link {
    background: url(images/Products.png) no-repeat left top;
    width: 100px;
    height: 22px;
    display: block;
    text-indent: -10000px;
}
.Home_menuProductsLink:hover {
    background: url(images/Products.png) no-repeat left bottom;
}
.Home_menuTestimonials {
    position: absolute;
    top: 135px;
    left: 598px;
}
.Home_menuTestimonialsLink:link {
    background: url(images/Testimonials.png) no-repeat left top;
    width: 128px;
    height: 22px;
    display: block;
    text-indent: -10000px;
}
.Home_menuTestimonialsLink:hover {
    background: url(images/Testimonials.png) no-repeat left bottom;
}
.Home_menuContactUs {
    position: absolute;
    top: 135px;
    left: 720px;
}
.Home_menuContactUsLink:link {
    background: url(images/ContactUs.png) no-repeat left top;
    width: 122px;
    height: 22px;
    display: block;
    text-indent: -10000px;
}
.Home_menuContactUsLink:hover {
    background: url(images/ContactUs.png) no-repeat left bottom;
}
.Home_header_image h1 {
    padding-top: 0;
    margin-top: 0;
}
.Home .Home_header_image .centre {
    float: left;
    width: 830px;
    margin: 0 0 0 30px;
}
Posted 2-May-12 10:43am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi,
 
Instead you can use jQuery plugins for slideshow,
 
here is the one of the plugins provided by jQuery : jQuery Slideshow
 
-Amit
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Mathew Soji 274
1 BillWoodruff 270
2 Afzaal Ahmad Zeeshan 244
3 Sergey Alexandrovich Kryukov 240
4 Raul Iloc 160
0 OriginalGriff 6,219
1 Sergey Alexandrovich Kryukov 5,853
2 DamithSL 5,103
3 Manas Bhardwaj 4,549
4 Maciej Los 3,845


Advertise | Privacy | Mobile
Web02 | 2.8.1411019.1 | Last Updated 3 May 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100