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

Question

我有一個可以滑動圖像的編碼器，並允許單擊每個具有不同鏈接的編碼器。 問題是我只能在頁面上使用一次。

如何修改它，以便可以在同一網頁上多次使用？ 該代碼附在下面。

另外，如果您知道有任何一段代碼可以更改圖像而不是幻燈片顯示，例如使它們淡出然后在幾秒鍾左右的時間內用新的圖像替換圖像，從而每個圖像都有自己的鏈接。

<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

通常，在大多數編程語言中，您都會將要使用的任何代碼多次放置在一個函數中。 然后，您隨時可以使用該代碼來調用該函數。