我有这个编码器可以滑动图像并允许用不同的链接点击每个图像。问题是我只能在页面上使用它一次。
如何修改它以便我可以在同一网页上多次使用它? 代码附在下面。
此外,如果你知道任何一段代码会改变图像而不是幻灯片放映,比如淡出它们,然后用一个新的图像替换图像几秒钟左右,每个图像都有自己的链接。
<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>
答案 0 :(得分:0)
一般而言,在大多数编程语言中,您可以将任何想要在函数中多次使用的代码放在一起。然后在您想要使用代码时随时调用该函数。