묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
마우스 온오버에 따른 이미지 슬라이드 소스에 대해..
2004.01.05 20:41
안녕하세요.
제가 소스를 하나 구했는데.. (nzeo에서 ;ㅁ;)
제가 딱 원하는 소스이긴 한데.. 약간 수정하고 싶더라구요..
근데 그게 맘같이 쉽게는 잘 안되네요.
그래서 도움을 요청해봅니다.
우선은 소스는 마우스 out 시에 이미지들을 오른쪽에서 왼쪽으로 슬라이딩 시키는 것입니다.
그리고 마우스를 on 시키면 그림이 멈추죠.
근데 제가 원하는 것은 마우스 on 시에 이미지를 슬라이딩 시키고.. out시엔 멈추는 거구요..
아래에서 위로 슬라이딩 시키고 싶은데..
이것저것 바꿔봐도 잘 안되네요..
좀 부탁드립니다.. (--)(__)(--)
원본 소스
<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=100
//Specify the slider's height (in pixels, pertains only to NS)
var sliderheight=400
//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="./images/1.jpg" width="84" border=0></a>'
leftrightslide[1]='<a href="#"><img src="./images/1.jpg" width="84" border=0></a>'
leftrightslide[2]='<a href="#"><img src="./images/1.jpg" width="84" border=0></a>'
leftrightslide[3]='<a href="#"><img src="./images/1.jpg" width="84" border=0></a>'
leftrightslide[4]='<a href="#"><img src="./images/1.jpg "width="84" 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>
제가 소스를 하나 구했는데.. (nzeo에서 ;ㅁ;)
제가 딱 원하는 소스이긴 한데.. 약간 수정하고 싶더라구요..
근데 그게 맘같이 쉽게는 잘 안되네요.
그래서 도움을 요청해봅니다.
우선은 소스는 마우스 out 시에 이미지들을 오른쪽에서 왼쪽으로 슬라이딩 시키는 것입니다.
그리고 마우스를 on 시키면 그림이 멈추죠.
근데 제가 원하는 것은 마우스 on 시에 이미지를 슬라이딩 시키고.. out시엔 멈추는 거구요..
아래에서 위로 슬라이딩 시키고 싶은데..
이것저것 바꿔봐도 잘 안되네요..
좀 부탁드립니다.. (--)(__)(--)
원본 소스
<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=100
//Specify the slider's height (in pixels, pertains only to NS)
var sliderheight=400
//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="./images/1.jpg" width="84" border=0></a>'
leftrightslide[1]='<a href="#"><img src="./images/1.jpg" width="84" border=0></a>'
leftrightslide[2]='<a href="#"><img src="./images/1.jpg" width="84" border=0></a>'
leftrightslide[3]='<a href="#"><img src="./images/1.jpg" width="84" border=0></a>'
leftrightslide[4]='<a href="#"><img src="./images/1.jpg "width="84" 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>