› web工房 やんばる堂 › スライドショー画像変更テスト2011年07月06日
【EDIT 】スライドショー画像変更テスト
スライドショーがとりあえず完成
記事本文中で、画像変更できるようにした。
Posted by ひでぼ@やんばる堂 at 14:40│Comments(1)
この記事へのコメント
<!---------------------------------------------
＊カスタムプラグイン用HTMLテンプレート
------------------------------------------->
<body onload=start1()>
<!-----インターフェース------->
<table border=0><tr><td>
<span style=font-weight:bold;background-color:#ffffff;color:#ff3333;>BGM＆スライドショー</span><BR>
<img id=img1 width=300 height=200 style="filter:blendTrans(duration=3.0) revealTrans(transition=23 duration=2.0);">
</td></tr><tr><td>
<!-----BGM------->
<div id=bgmList></div>
<iframe width="300" height="28" onclick=start1()
src="http://www.youtube.com/embed/-DW8ecqu0Iw?rel=0"
frameborder="0" allowfullscreen></iframe>
</td></tr><tr><td>
<center><span style=font-size:8pt;><a href=http://delshanon.ti-da.net/ target=_blunk>web工房 やんばる堂</a> Presents</span></center>
</td></tr><tr><td></table>
<!-------非表示デフォルトデータ------------------------------->
<div style=display:none;>
＊画像一覧
<img name=imgs src=//img02.ti-da.net/usr/delshanon/IMG_1713.jpg>
<img name=imgs src=//img02.ti-da.net/usr/delshanon/IMG_1705.jpg>
<img name=imgs src=//img02.ti-da.net/usr/delshanon/IMG_1713.jpg>
＊BGM一覧
＊テキスト
＊END
</div>
<!--------記事本文中でデータを変更する時は id=imgs で設定----------->
<div style=display:none;>
＊画像一覧
<img name=imgs src=//img02.ti-da.net/usr/delshanon/IMG_1713.jpg>
＊BGM一覧
＊テキスト
＊END
</div>
<!----------------------------------------------
＊JAVAスクリプト
------------------------------------------->
<script language=javascript type=text/javascript><!--
var BR=String.fromCharCode(10)
var Br=unescape("%0D%0A");
var sec=0
var RX=0
var IMG=new Array()
function cutStr(str,str1,str2){
var yy=str.split(str1)
var xx=yy[1].split(str2)
ret=xx[0]
ret=ret.replace(Br,"")
return ret
}
/***********************************************
＊start()
***********************************************/
function start1(){
IMG=setIMG()
document.all.img1.src=IMG[0]
RX=0
slideUrl()
}
/***********************************************
＊setIMG()
***********************************************/
function setIMG(){
elms=document.getElementsByName("imgs")
LX=elms.length
list=elms[0].src
for(i=1;i<LX;i++){
list=list+BR+elms[i].src
}
IMG=list.split(BR)
return IMG
}
/***********************************************
＊タイマー
***********************************************/
function slideUrl(){
SRC=IMG[RX]
if(SRC.indexOf(".")==-1){
RX++
LX=IMG.length-1
if(RX>LX){RX=0}
}
SRC=IMG[RX]
WT=5*1000
TR="blend"
TR="23"
DR="2.0"
elm=document.all.img1
if(TR=="blend"){
elm.filters.blendTrans.Apply();
elm.filters.blendTrans.duration=DR
elm.style.visibility="visible"
elm.src=SRC
elm.filters.blendTrans.Play()
elm.style.display="block"
}else{
elm.filters.revealTrans.Apply();
elm.filters.revealTrans.duration=DR
elm.filters.revealTrans.transition=TR
elm.style.visibility="visible"
elm.filters.revealTrans.Play()
elm.src=SRC
}
RX++
LX=IMG.length-1
if(RX>LX){RX=0}
timer1=setTimeout("slideUrl()",WT)
}
/***********************************************
＊ランダム関数
***********************************************/
function RND(x){
xx = Math.floor(Math.random() * x);
return xx
}
function シャッフル(CSV){
YY=CSV.split(BR)
MX=YY.length
XX=new Array()
for(i in YY){
var x = Math.floor(Math.random() * MX);
XX[i]=YY[x]
YY=DeleteYY(YY,x)
}
ret=XX.join(BR)
return ret
}
function DeleteY(str,y){
YY=str.split(BR)
yy=str.split(YY[y]+BR)
ret=yy[0]+yy[1]
return ret
}
function DeleteYY(YY,y){
str=YY.join(BR)
yy=str.split(YY[y]+BR)
ret=yy[0]+BR+yy[1]
YY=ret.split(BR)
return YY
}
//-->
</script>
<!------------------------------------------------------------------------------------
＊このプラグインHTMLソースの使用方法
-------------------------------------------------------------------------------------->
＊カスタムプラグイン用HTMLテンプレート
------------------------------------------->
<body onload=start1()>
<!-----インターフェース------->
<table border=0><tr><td>
<span style=font-weight:bold;background-color:#ffffff;color:#ff3333;>BGM＆スライドショー</span><BR>
<img id=img1 width=300 height=200 style="filter:blendTrans(duration=3.0) revealTrans(transition=23 duration=2.0);">
</td></tr><tr><td>
<!-----BGM------->
<div id=bgmList></div>
<iframe width="300" height="28" onclick=start1()
src="http://www.youtube.com/embed/-DW8ecqu0Iw?rel=0"
frameborder="0" allowfullscreen></iframe>
</td></tr><tr><td>
<center><span style=font-size:8pt;><a href=http://delshanon.ti-da.net/ target=_blunk>web工房 やんばる堂</a> Presents</span></center>
</td></tr><tr><td></table>
<!-------非表示デフォルトデータ------------------------------->
<div style=display:none;>
＊画像一覧
<img name=imgs src=//img02.ti-da.net/usr/delshanon/IMG_1713.jpg>
<img name=imgs src=//img02.ti-da.net/usr/delshanon/IMG_1705.jpg>
<img name=imgs src=//img02.ti-da.net/usr/delshanon/IMG_1713.jpg>
＊BGM一覧
＊テキスト
＊END
</div>
<!--------記事本文中でデータを変更する時は id=imgs で設定----------->
<div style=display:none;>
＊画像一覧
<img name=imgs src=//img02.ti-da.net/usr/delshanon/IMG_1713.jpg>
＊BGM一覧
＊テキスト
＊END
</div>
<!----------------------------------------------
＊JAVAスクリプト
------------------------------------------->
<script language=javascript type=text/javascript><!--
var BR=String.fromCharCode(10)
var Br=unescape("%0D%0A");
var sec=0
var RX=0
var IMG=new Array()
function cutStr(str,str1,str2){
var yy=str.split(str1)
var xx=yy[1].split(str2)
ret=xx[0]
ret=ret.replace(Br,"")
return ret
}
/***********************************************
＊start()
***********************************************/
function start1(){
IMG=setIMG()
document.all.img1.src=IMG[0]
RX=0
slideUrl()
}
/***********************************************
＊setIMG()
***********************************************/
function setIMG(){
elms=document.getElementsByName("imgs")
LX=elms.length
list=elms[0].src
for(i=1;i<LX;i++){
list=list+BR+elms[i].src
}
IMG=list.split(BR)
return IMG
}
/***********************************************
＊タイマー
***********************************************/
function slideUrl(){
SRC=IMG[RX]
if(SRC.indexOf(".")==-1){
RX++
LX=IMG.length-1
if(RX>LX){RX=0}
}
SRC=IMG[RX]
WT=5*1000
TR="blend"
TR="23"
DR="2.0"
elm=document.all.img1
if(TR=="blend"){
elm.filters.blendTrans.Apply();
elm.filters.blendTrans.duration=DR
elm.style.visibility="visible"
elm.src=SRC
elm.filters.blendTrans.Play()
elm.style.display="block"
}else{
elm.filters.revealTrans.Apply();
elm.filters.revealTrans.duration=DR
elm.filters.revealTrans.transition=TR
elm.style.visibility="visible"
elm.filters.revealTrans.Play()
elm.src=SRC
}
RX++
LX=IMG.length-1
if(RX>LX){RX=0}
timer1=setTimeout("slideUrl()",WT)
}
/***********************************************
＊ランダム関数
***********************************************/
function RND(x){
xx = Math.floor(Math.random() * x);
return xx
}
function シャッフル(CSV){
YY=CSV.split(BR)
MX=YY.length
XX=new Array()
for(i in YY){
var x = Math.floor(Math.random() * MX);
XX[i]=YY[x]
YY=DeleteYY(YY,x)
}
ret=XX.join(BR)
return ret
}
function DeleteY(str,y){
YY=str.split(BR)
yy=str.split(YY[y]+BR)
ret=yy[0]+yy[1]
return ret
}
function DeleteYY(YY,y){
str=YY.join(BR)
yy=str.split(YY[y]+BR)
ret=yy[0]+BR+yy[1]
YY=ret.split(BR)
return YY
}
//-->
</script>
<!------------------------------------------------------------------------------------
＊このプラグインHTMLソースの使用方法
-------------------------------------------------------------------------------------->
Posted by ひでぼ
at 2011年07月06日 23:36
at 2011年07月06日 23:36
画像一覧 
