이미지 슬라이드 쑈 1

컴퓨터 관련/태그

이미지 슬라이드 쑈 1 - 태그배우기

승명 2018. 1. 14. 09:46

이미지 슬라이드 쑈 1

1.<HTML>
<HEAD>
<TITLE>이미지 슬라이드 쑈 1 ▒ mysesang.com ▒</TITLE>
<meta http-ｅquiv="Content-Type" content="text/html; charset=euc-kr">

<script language="JavaScript1.1">

var img2 = new Image();
img2.src = "http://mysesang.com/tip/img/slide002.jpg"
var img3 = new Image();
img3.src = "http://mysesang.com/tip/img/slide003.jpg"
var img4 = new Image();
img4.src = "http://mysesang.com/tip/img/slide004.jpg" 
var maxLoops = 4;
var bInterval = 4;
var count = 2;
function init() {
blendObj.filters.blendTrans.apply();
document.images.blendObj.src = eval("img"+count+".src");
blendObj.filters.blendTrans.play();
if (count < maxLoops) {
count++;
}
else {
count = 1;
}
setTimeout("init()", bInterval*500+3000);
}
//-->
</script>
</HEAD>
<BODY onLoad="init()">
<img src="http://mysesang.com/tip/img/slide001.jpg" name="blendObj" border=0 style="filter:blendTrans(duration=3)">

</BODY></HTML>

견본 보기

2. <HTML>
<HEAD>
<TITLE>이미지 슬라이드 쑈 2 ▒ mysesang.com ▒</TITLE>
<meta http-ｅquiv="Content-Type" content="text/html; charset=euc-kr">
<SCRIPT LANGUAGE="JavaScript">
<!--

//사용할 이미지의 경로를 적어주세요
src = ["http://mysesang.com/tip/img/slide001.jpg",
       "http://mysesang.com/tip/img/slide002.jpg",
       "http://mysesang.com/tip/img/slide003.jpg",
       "http://mysesang.com/tip/img/slide004.jpg"]

//연결할 주소를 적어주세요
url = ["http://mysesang.com", "http://yahoo.co.kr", "http://daum.net", "http://mysesang.com"]

//이미지를 보여줄 시간을 적어주세요
duration = 3;

//이부분은 수정하시면 안됩니다
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["Ad_Image"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
function doLink(){
location.href = url[ct];
} onload = function(){
if (document.images)
switchAd();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascripｔ:doLink();" onMouseOver="status=url[ct];return true;" onMouseOut="status=''">
<IMG NAME="Ad_Image" SRC="http://mysesang.com/tip/img/slide001.jpg" BORDER=0 width="369" height="369"></A>
</BODY></HTML>

3. 
<script language="JavaScript1.2">
var scrollerwidth=369
var scrollerheight=369
var scrollerbgcolor='FFFFFF'
var pausebetweenimages=2000
var slideimages=new Array()
slideimages[0]='<a href="#"><IMG SRC="http://mysesang.com/tip/img/slide001.jpg" BORDER=0 ALT=""></a>'
slideimages[1]='<a href="#"><IMG SRC="http://mysesang.com/tip/img/slide002.jpg" BORDER=0 ALT=""></a>'
slideimages[2]='<a href="#"><IMG SRC="http://mysesang.com/tip/img/slide003.jpg" BORDER=0 ALT=""></a>'
slideimages[3]='<a href="#"><IMG SRC="http://mysesang.com/tip/img/slide004.jpg" BORDER=0 ALT=""></a>'
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",10)
}
else{
tlayer.left=scrollerwidth+5
tlayer.document.writｅ(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",10)
}
else{
tlayer2.left=scrollerwidth+5
tlayer2.document.writｅ(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelLeft>0&&tdiv.style.pixelLeft<=5){
tdiv.style.pixelLeft=0
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2)",pausebetweenimages)
return
}
if (tdiv.style.pixelLeft>=tdiv.offsetWidth*-1){
tdiv.style.pixelLeft-=5
setTimeout("move3(tdiv)",10)
}
else{
tdiv.style.pixelLeft=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelLeft>0&&tdiv2.style.pixelLeft<=5){
tdiv2.style.pixelLeft=0
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2)",pausebetweenimages)
return
}
if (tdiv2.style.pixelLeft>=tdiv2.offsetWidth*-1){
tdiv2.style.pixelLeft-=5
setTimeout("move4(second2)",10)
}
else{
tdiv2.style.pixelLeft=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (document.all){
move3(first2)
second2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=scrollerwidth+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll
</script>

4. <HTML>
<HEAD>
<TITLE>이미지 슬라이드 쑈 4 ▒ Slideshow ▒ mysesang.com ▒</TITLE>
<meta http-ｅquiv="Content-Type" content="text/html; charset=euc-kr">
<style>
.spanstyle { position:absolute; }
</style>
<script>
<!-- Beginning of JavaScript -
// CREDITS:
// Slideshow with stripe by stripe transition effect
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.

var imgwidth=369
var imgheight=369
var imgname=new Array()
imgname[0]="http://mysesang.com/tip/img/slide001.jpg"
imgname[1]="http://mysesang.com/tip/img/slide002.jpg"
imgname[2]="http://mysesang.com/tip/img/slide003.jpg"
imgname[3]="http://mysesang.com/tip/img/slide004.jpg"
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgname[i]
}
var imgurl=new Array()
imgurl[0]="#"
imgurl[1]="#"
imgurl[2]="#"
imgurl[3]="#"
var x_finalpos=320
var y_finalpos=340
var x_slices=15
var pause=2000
var randomorder= new Array()
for (i=0;i<=x_slices-1;i++) {
randomorder[i]=i
}
var speed=200
var i_images=0
var width_slice=Math.floor(imgwidth/x_slices)
var cliptop=0
var clipbottom=imgheight
var clipleft=0
var clipright=width_slice
var x_random=new Array()
var max_explsteps=15
var i_explsteps=0

function checkbrowser() {
if (document.all) {
initiateIE()
}
if (document.layers) {
initiateNN()
}
}

function dissolveimgIE() {
if (i_loop<=x_slices-1) {
var thisspan=eval("span"+randomorder[i_loop])
thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"
i_loop++
var timer=setTimeout("dissolveimgIE()",speed)
}
else {
clearTimeout(timer)
var timer=setTimeout("changeimageIE()",pause)
}
}

function dissolveimgNN() {
if (i_loop<=x_slices-1) {
var thisspan=eval("document.span"+randomorder[i_loop]+".document")
thisspan.write("<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>")
thisspan.close()
i_loop++
var timer=setTimeout("dissolveimgNN()",speed)
}
else {
clearTimeout(timer)
var timer=setTimeout("changeimageNN()",pause)
}
}

function changeimageIE() {
getrandomorder(x_slices)
i_loop=0
i_images++
if (i_images>=imgname.length) {i_images=0}
dissolveimgIE()
}

function changeimageNN() {
getrandomorder(x_slices)
i_loop=0
i_images++
if (i_images>=imgname.length) {i_images=0}
dissolveimgNN()
}

function getrandomorder(range) {
for (i=0;i<=range;i++) {
var firstvalue= Math.floor(range*Math.random())
var secondvalue= Math.floor(range*Math.random())
var cachevalue=randomorder[firstvalue]
randomorder[firstvalue]=randomorder[secondvalue]
randomorder[secondvalue]=cachevalue
}
}

// - End of JavaScript - -->
</script>
</HEAD>
<BODY onLoad="checkbrowser();">
<script>

</script>
</BODY></HTML>

5. <HTML>
<HEAD>
<TITLE>이미지 슬라이드 쑈 4 ▒ Slideshow ▒ mysesang.com ▒</TITLE>
<meta http-ｅquiv="Content-Type" content="text/html; charset=euc-kr">
<script LANGUAGE="JavaScript1.1">

bild1.src = "http://mysesang.com/tip/img/slide001.jpg"

bild2 = new Image()
bild2.src = "http://mysesang.com/tip/img/slide002.jpg"

bild3 = new Image()
bild3.src = "http://mysesang.com/tip/img/slide003.jpg"

bild4 = new Image()
bild4.src = "http://mysesang.com/tip/img/slide004.jpg"

messages = new Array()
messages[0] = "<img src=http://mysesang.com/tip/img/slide001.jpg>"
messages[1] = "<img src=http://mysesang.com/tip/img/slide002.jpg>"
messages[2] = "<img src=http://mysesang.com/tip/img/slide003.jpg>"
messages[3] = "<img src=http://mysesang.com/tip/img/slide004.jpg>"

var i_messages = 0
var timer

</BODY></HTML>

6,<HTML>
<HEAD>
<TITLE>이미지 슬라이드 쑈 4 ▒ Slideshow ▒ mysesang.com ▒</TITLE>
<meta http-ｅquiv="Content-Type" content="text/html; charset=euc-kr">
</HEAD>
<BODY>
<script language="JavaScript1.2">
<!--start Drop-In Slieshow
//By Dynamic Drive

var slideshow_width=369 //
var slideshow_height=369 //
var pause=2000 // 다음 이미지 교체 타이밍 (2000=2초)
var dropimages=new Array()
// 슬라이드로 사용할 이미지들을 필요한 만큼지정
dropimages[0]="http://mysesang.com/tip/img/slide001.jpg"
dropimages[1]="http://mysesang.com/tip/img/slide002.jpg"
dropimages[2]="http://mysesang.com/tip/img/slide003.jpg"
dropimages[3]="http://mysesang.com/tip/img/slide004.jpg"
//위와같은 형식으로 일련번호를 주어 추가.
////이하 수정할 필요 없음/////////////
var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
//--☆
document.writｅ('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div></div>')
else
//--☆
document.writｅ('<img name="defaultslide" src="'+dropimages[0]+'">')

var curpos=slideshow_height*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.top=curpos
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+dropimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=slideshow_height*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+dropimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
// end Drop-In Slieshow-->
</script>
</BODY></HTML>

7.<HTML>
<HEAD>
<TITLE>이미지 슬라이드 쑈 7 ▒ Slideshow ▒ mysesang.com ▒</TITLE>
<meta http-ｅquiv="Content-Type" content="text/html; charset=euc-kr">
</HEAD>
<BODY>
<script language="JavaScript">

var specifyimage=new Array()
specifyimage[0]="http://mysesang.com/tip/img/slide001.jpg"
specifyimage[1]="http://mysesang.com/tip/img/slide002.jpg"
specifyimage[2]="http://mysesang.com/tip/img/slide003.jpg"
specifyimage[3]="http://mysesang.com/tip/img/slide004.jpg"
specifyimage[4]="http://mysesang.com/tip/img/slide005.jpg"
specifyimage[5]="http://mysesang.com/tip/img/slide006.jpg"

var delay=2000 //2초(1000/1초).초가 늘어날수록 느리게 회전

var count =1;

var cubeimage=new Array()
for (i=0;i<specifyimage.length;i++){
cubeimage[i]=new Image()
cubeimage[i].src=specifyimage[i]
}

function movecube(){
if (window.createPopup)
cube.filters[0].apply()
document.images.cube.src=cubeimage[count].src;
if (window.createPopup)
cube.filters[0].play()
count++;
if (count==cubeimage.length)
count=0;
setTimeout("movecube()",delay)
}

window.onload=new Function("setTimeout('movecube()',delay)")
</script>

</BODY></HTML>

8. <HTML>
<HEAD>
<TITLE>이미지 슬라이드 쑈 8 ▒ Slideshow ▒ mysesang.com ▒</TITLE>
<meta http-ｅquiv="Content-Type" content="text/html; charset=euc-kr">
</HEAD>
<BODY>
<script type="text/javascript">
var trans_width='369px' //가로크기 (이미지의 가로크기에 맞추세요)
var trans_height='369px' //높이
var pause=3000 //각 이미지의 지연시간 (3000=3초)
var degree=50 //애니메이션 속도(숫자가 클수록 빨라집니다)

var slideshowcontent=new Array()
//각 이미지들을 설정 하세요 [이미지주소, 링크주소, 타겟]
slideshowcontent[0]=["http://mysesang.com/tip/img/slide001.jpg", "http://mysesang.com", "_new"]
slideshowcontent[1]=["http://mysesang.com/tip/img/slide002.jpg", "http://mysesang.com", "_new"]
slideshowcontent[2]=["http://mysesang.com/tip/img/slide003.jpg", "http://mysesang.com", "_new"]
slideshowcontent[2]=["http://mysesang.com/tip/img/slide004.jpg", "http://mysesang.com", "_new"]
var bgcolor='white' // 배경색

var imageholder=new Array()
for (i=0;i<slideshowcontent.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideshowcontent[i][0]
}

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.writｅ('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.writｅ('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>')
}

var curpos=trans_width*(-1)
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function getslidehtml(theslide){
var slidehtml=""
if (theslide[1]!="")
slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'
slidehtml+='<img src="'+theslide[0]+'" border="0">'
if (theslide[1]!="")
slidehtml+='</a>'
return slidehtml
}

function moveslide(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])
nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.writｅ(getslidehtml(slideshowcontent[curindex]))
crossobj.document.close()
}
curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0
}

function jumptoslide(which){
curindex=which
rotateslide()
}

function resetit(what){
curpos=parseInt(trans_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=getslidehtml(slideshowcontent[curindex])
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (window.addEventListener)
window.addEventListener("load", startit, false)
else if (window.attachEvent)
window.attachEvent(onload", startit)
else if (ie4||dom||document.layers)
window.onload=startit

</script>

</BODY></HTML>

'컴퓨터 관련 > 태그' 카테고리의 다른 글

책장넘기기 (0)	2018.01.14
책장 넘기기 (0)	2018.01.14
이미지 Slideshow 태그배우기 (0)	2018.01.14
태그 하이퍼링크 걸기 (0)	2017.01.14
각종 글자 태그 (0)	2016.03.20

현재글이미지 슬라이드 쑈 1 - 태그배우기

Today :
Yesterday :

원리(遠離) 지식(止息) 무심정(無心定)