SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Location
    Pretoria, South Africa, South Africa
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Sliding Images - How to add elements/classes

    I have this Javascript sliding image script. It works great, but I would like to add text in the form of a paragraph tag to the sliding effect, one paragraph accompanying each image in the slide. How to do that? My code:

    <script language="JavaScript">
    var image = new Array("images/ref1.png", "images/ref2.png",
    "images/bb.png", "images/windows.png")
    var imgNumber=1
    var numberOfImg = image.length

    function previousImage(){
    if(imgNumber > 1){
    imgNumber--
    }

    else{
    imgNumber = numberOfImg
    }

    document.slideImage.src = image[imgNumber-1]
    }

    function nextImage(){
    if(imgNumber < numberOfImg){
    imgNumber++
    }

    else{
    imgNumber = 1
    }

    document.slideImage.src = image[imgNumber-1]
    }

    if(document.images){
    var image1 = new Image()
    image1.src = "images/ref1.png"
    var image2 = new Image()
    image2.src = "images/ref2.png"
    var image3 = new Image()
    image3.src = "images/bb.png"
    var image4 = new Image()
    image4.src = "images/windows.png"
    }
    </script>
    <table>
    <tr>
    <td><img src="images/ref1.png" name="slideImage"></td>
    </tr>
    <tr>
    <td><a href="JavaScriptreviousImage()">
    <img src="" border="none"/>prev</a>
    </td>
    <td><a href="JavaScript:nextImage()">
    <img src="" border="none" />next</a>
    </td>
    </tr>
    </table>

    Thank You

  2. #2
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Check out this demo: http://jsfiddle.net/OMGCarlos/nHRRg/2/

    All I did was add a <p id="slideText"... tag underneath the <img id="slideImage"...
    Then I created an array in the same was as you created your image array, and
    Code:
    document.getElementById('slideText').innerHTML = text[imgNumber-1];
    Underneath both lines that had slideImage.src

    I basically just copy+pasted your code and added 4 lines. You where very close!


Tags for this Thread

Bookmarks

Posting Permissions

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