묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
이미지 슬라이드 관련 질문!!!
2003.01.05 12:06
다음 소스는 이미지가 우측에서 좌측으로 흘러가는 소스입니다.
그런데 만약 이미지를 5개로 넣으면 계속 이어붙어서 흘러가야하는데 화면상에서 5개 이미지가 모두 지나가면 공백으로
남앗다가 다시 새롭게 나옵니다.
계속 끊어지지 않고 이어지게 할려면 어딜 수정해야하나요?
조언 부탁드립니다.
<script language="JavaScript1.2">
<!--
/*
Conveyor belt slideshow script-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
//Specify the slider's width (in pixels)
var sliderwidth=330
//Specify the slider's height (in pixels, pertains only to NS)
var sliderheight=145
//Specify the slider's scroll speed (larger is faster)
var slidespeed=4
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="#"><img src=" http://dong0987.nayes.net/study/images/moon1.jpg" width="94" height="101" border=0></a> '
leftrightslide[1]='<a href="#"><img src=" http://dong0987.nayes.net/study/images/moon.jpg" width="94" height="101" border=0></a> '
leftrightslide[2]='<a href="#"><img src=" http://dong0987.nayes.net/study/images/basara13.jpg" width="94" height="101" border=0></a> '+ '+ '
leftrightslide[3]='<a href="#"><img src=" http://dong0987.nayes.net/study/images/basara2.jpg" width="94" height="101" border=0></a> '
leftrightslide[4]='<a href="#"><img src=" http://my.dreamwiz.com/dong0987/images/basara21-1.jpg"width="94" height="101" border=0></a> '
///////do NOT edit pass this line////////////////////////////////////
var copyspeed=slidespeed
//copy contents of leftrightslide into one variable
for (i=0;i<leftrightslide.length;i++)
finalslide=finalslide+leftrightslide[i]+" "
if (document.all){
//dynamically write out the marquee tag
document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+ '+sliderwidth+'">'+finalslide+'</marquee>')
//stop marquee when mouse is over it
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
//re-enable marquee when mouse is out
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
document.ns_slider01.visibility="show"
setTimeout("window.onresize=regenerate",450)
intializeleftrightslide()
}
if (document.all)
ieslider.scrollAmount=slidespeed
}
//NS specific function for initializing slider upon page load
function intializeleftrightslide(){
document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
document. ns_slider01.document.ns_slider02.document.close()
thelength=document.ns_slider01.document.ns_slider02.document.width
scrollslide()
}
//NS specific function for sliding slideshow
function scrollslide(){
if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
document.ns_slider01.document.ns_slider02.left-=slidespeed
setTimeout("scrollslide()",100)
}
else{
document.ns_slider01.document.ns_slider02.left=sliderwidth
scrollslide()
}
}
window.onload=regenerate2
//-->
</script>
</font><font color="#000000"><ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide>
<!--~============ LAYER ============~-->
</font><layer name="ns_slider02" onMouseover="slidespeed=0;" onMouseout="slidespeed=copyspeed" id="layer1" left="50" top="50" width="200" height="200" z-index="1">
<p> </p>
</layer>
<p><!--~========== END LAYER ==========~-->
</ilayer>
<div ALIGN="right">
</div>
</body>
그런데 만약 이미지를 5개로 넣으면 계속 이어붙어서 흘러가야하는데 화면상에서 5개 이미지가 모두 지나가면 공백으로
남앗다가 다시 새롭게 나옵니다.
계속 끊어지지 않고 이어지게 할려면 어딜 수정해야하나요?
조언 부탁드립니다.
<script language="JavaScript1.2">
<!--
/*
Conveyor belt slideshow script-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
//Specify the slider's width (in pixels)
var sliderwidth=330
//Specify the slider's height (in pixels, pertains only to NS)
var sliderheight=145
//Specify the slider's scroll speed (larger is faster)
var slidespeed=4
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="#"><img src=" http://dong0987.nayes.net/study/images/moon1.jpg" width="94" height="101" border=0></a> '
leftrightslide[1]='<a href="#"><img src=" http://dong0987.nayes.net/study/images/moon.jpg" width="94" height="101" border=0></a> '
leftrightslide[2]='<a href="#"><img src=" http://dong0987.nayes.net/study/images/basara13.jpg" width="94" height="101" border=0></a> '+ '+ '
leftrightslide[3]='<a href="#"><img src=" http://dong0987.nayes.net/study/images/basara2.jpg" width="94" height="101" border=0></a> '
leftrightslide[4]='<a href="#"><img src=" http://my.dreamwiz.com/dong0987/images/basara21-1.jpg"width="94" height="101" border=0></a> '
///////do NOT edit pass this line////////////////////////////////////
var copyspeed=slidespeed
//copy contents of leftrightslide into one variable
for (i=0;i<leftrightslide.length;i++)
finalslide=finalslide+leftrightslide[i]+" "
if (document.all){
//dynamically write out the marquee tag
document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+ '+sliderwidth+'">'+finalslide+'</marquee>')
//stop marquee when mouse is over it
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
//re-enable marquee when mouse is out
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
document.ns_slider01.visibility="show"
setTimeout("window.onresize=regenerate",450)
intializeleftrightslide()
}
if (document.all)
ieslider.scrollAmount=slidespeed
}
//NS specific function for initializing slider upon page load
function intializeleftrightslide(){
document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
document. ns_slider01.document.ns_slider02.document.close()
thelength=document.ns_slider01.document.ns_slider02.document.width
scrollslide()
}
//NS specific function for sliding slideshow
function scrollslide(){
if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
document.ns_slider01.document.ns_slider02.left-=slidespeed
setTimeout("scrollslide()",100)
}
else{
document.ns_slider01.document.ns_slider02.left=sliderwidth
scrollslide()
}
}
window.onload=regenerate2
//-->
</script>
</font><font color="#000000"><ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide>
<!--~============ LAYER ============~-->
</font><layer name="ns_slider02" onMouseover="slidespeed=0;" onMouseout="slidespeed=copyspeed" id="layer1" left="50" top="50" width="200" height="200" z-index="1">
<p> </p>
</layer>
<p><!--~========== END LAYER ==========~-->
</ilayer>
<div ALIGN="right">
</div>
</body>