如何更改此代码，以便我可以在同一页面上再次使用它

Question

I have this coder that slides images and allow to click each with a different link. The problem is that I can use it only once on a page.

How can I modify it so I can use it many times over on the same webpage? The code is attached below.

Also if you know of any piece of code that will change images instead of slide show, like fading them out and then replacing the image with a new one ever a couple of seconds or so, whereby each image has its own link.

<script type="text/javascript">
/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth = "285px"
//Specify the slider's height
var sliderheight = "135px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed = 5
//configure background color:
slidebgcolor = "#EAEAEA"

//Specify the slider's images
var leftrightslide = new Array()
var finalslide = ''

// the original 5 lines
// leftrightslide[0] = '<a href="http://office.microsoft.com/en-gb/" target="_blank"><img src="Images/MS-Access-2013.png" border=1></a>'
// leftrightslide[1] = '<a href="http://"><img src="Images/MS-Excel-2013.png" border=1></a>'
// leftrightslide[2] = '<a href="http://windows.microsoft.com/en-US/windows/home" target="_blank"><img src="Images/MS-Word-2013.png" border=1></a>'
// leftrightslide[3] = '<a href="http://office.microsoft.com/en-gb/" target="_blank"><img src="Images/MS-Outlook-2013.png" border=1></a>'
// leftrightslide[4] = '<a href="http://"><img src="Images/MS-PowerPoint-2013.png" border=1></a>'
// end of the original lines

// My new 13 lines
leftrightslide[0] = '<a href="http://office.microsoft.com/" target="_blank"><img src="Images/MS-Office365-Logo.png" border=1></a>'
leftrightslide[1] = '<a href="http://office.microsoft.com/access/" target="_blank"><img src="Images/MS-Access-2013.png" border=1></a>'
leftrightslide[2] = '<a href="http://office.microsoft.com/exchange/" target="_blank"><img src="Images/MS-Exchange-2013.png" border=1></a>'
leftrightslide[3] = '<a href="http://office.microsoft.com/excel/" target="_blank"><img src="Images/MS-Excel-2013.png" border=1></a>'
leftrightslide[4] = '<a href="http://office.microsoft.com/en-gb/infopath-help/introduction-to-infopath-forms-services-HA010164956.aspx" target="_blank"><img src="Images/MS-InfoPath-2013.png" border=1></a>'
leftrightslide[5] = '<a href="http://office.microsoft.com/lync/" target="_blank"><img src="Images/MS-Lync-2013.png" border=1></a>'
leftrightslide[6] = '<a href="http://office.microsoft.com/onenote" target="_blank"><img src="Images/MS-OneNote-2013.png" border=1></a>'
leftrightslide[7] = '<a href="http://office.microsoft.com/outlook" target="_blank"><img src="Images/MS-Outlook-2013.png" border=1></a>'
leftrightslide[8] = '<a href="http://office.microsoft.com/powerpoint" target="_blank"><img src="Images/MS-PowerPoint-2013.png" border=1></a>'
leftrightslide[9] = '<a href="http://office.microsoft.com/publisher" target="_blank"><img src="Images/MS-Publisher-2013.png" border=1></a>'
leftrightslide[10] = '<a href="http://office.microsoft.com/sharepoint”  target="_blank"><img src="Images/MS-SharePoint-2013.png" border=1></a>'
leftrightslide[11] = '<a href="http://windows.microsoft.com/en-GB/skydrive/download" target="_blank"><img src="Images/MS-SkyDrive-2013.png" border=1></a>'
leftrightslide[12] = '<a href="http://office.microsoft.com/word" target="_blank"><img src="Images/MS-Word-2013.png" border=1></a>'
leftrightslide[13] = '<a href=" http://office.microsoft.com/web-apps/" target="_blank"><img src="Images/MS-Office-Web-Apps.jpg" border=1></a>'


//Specify gap between each image (use HTML):
var imagegap = " "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap = 1


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed = slidespeed
leftrightslide = '<nobr>' + leftrightslide.join(imagegap) + '</nobr>'
var iedom = document.all || document.getElementById
if (iedom)
    document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">' + leftrightslide + '</span>')
var actualwidth = ''
var cross_slide, ns_slide

function fillup() {
    if (iedom) {
        cross_slide = document.getElementById ? document.getElementById("test2") : document.all.test2
        cross_slide2 = document.getElementById ? document.getElementById("test3") : document.all.test3
        cross_slide.innerHTML = cross_slide2.innerHTML = leftrightslide
        actualwidth = document.all ? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
        cross_slide2.style.left = actualwidth + slideshowgap + "px"
    }
    else if (document.layers) {
        ns_slide = document.ns_slidemenu.document.ns_slidemenu2
        ns_slide2 = document.ns_slidemenu.document.ns_slidemenu3
        ns_slide.document.write(leftrightslide)
        ns_slide.document.close()
        actualwidth = ns_slide.document.width
        ns_slide2.left = actualwidth + slideshowgap
        ns_slide2.document.write(leftrightslide)
        ns_slide2.document.close()
    }
    lefttime = setInterval("slideleft()", 30)
}
window.onload = fillup

function slideleft() {
    if (iedom) {
        if (parseInt(cross_slide.style.left) > (actualwidth * (-1) + 8))
            cross_slide.style.left = parseInt(cross_slide.style.left) - copyspeed + "px"
        else
            cross_slide.style.left = parseInt(cross_slide2.style.left) + actualwidth + slideshowgap + "px"

        if (parseInt(cross_slide2.style.left) > (actualwidth * (-1) + 8))
            cross_slide2.style.left = parseInt(cross_slide2.style.left) - copyspeed + "px"
        else
            cross_slide2.style.left = parseInt(cross_slide.style.left) + actualwidth + slideshowgap + "px"

    }
    else if (document.layers) {
        if (ns_slide.left > (actualwidth * (-1) + 8))
            ns_slide.left -= copyspeed
        else
            ns_slide.left = ns_slide2.left + actualwidth + slideshowgap

        if (ns_slide2.left > (actualwidth * (-1) + 8))
            ns_slide2.left -= copyspeed
        else
            ns_slide2.left = ns_slide.left + actualwidth + slideshowgap
    }
}


if (iedom || document.layers) {
    with (document) {
        document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
        if (iedom) {
            write('<div style="position:relative;width:' + sliderwidth + ';height:' + sliderheight + ';overflow:hidden">')
            write('<div style="position:absolute;width:' + sliderwidth + ';height:' + sliderheight + ';background-color:' + slidebgcolor + '" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
            write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
            write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
            write('</div></div>')
        }
        else if (document.layers) {
            write('<ilayer width=' + sliderwidth + ' height=' + sliderheight + ' name="ns_slidemenu" bgColor=' + slidebgcolor + '>')
            write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
            write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
            write('</ilayer>')
        }
        document.write('</td></table>')
    }
}
</script>

Answer 1

In general and in most programming languages you would place any code you want to be used more than once in a function. Then call the function anytime you want to use the code.