이 코드를 변경하여 동일한 페이지에서 다시 사용할 수 있도록

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

일반적으로 대부분의 프로그래밍 언어에서는 함수에 두 번 이상 사용하려는 코드를 두어야합니다. 그런 다음 코드를 사용할 때마다 함수를 호출하십시오.