どもです。
最近、妙に夢見の悪い餅。です。
大学4年の正月休みに資格必須の集中講義を寝過ごし逃すとか、なにこのリアル過ぎてワロエナイ夢…。
さて、今回はJavaScriptについて。
スライドショーをjsで作ることになりました。
画像が入れ替わって、それにリンクが伴っている単純なものです。
ただし、割と更新が頻繁に行われる上、更新するのはJavascriptにあまり詳しくない人です。
しかも、できるだけJavaScriptの編集だけで更新を行いたいとのこと。
それでいて、なぜかjQuery使用不可。
これは、なかなか難題かもしれぬ…
てなわけで、こんなん作りました。
ソース長ぇｗ
var slideshow = 4 ; // スライド数
var slidesnow = 1 ; // 現在のスライド位置
var slideflag = 1 ; // クリックでスライドを切り替えた際のカウントリセット用フラグ
var slide01_url = "aaa.html" ; // スライド1のURL
var slide01_img = "aaa.jpg" ; // スライド1の画像名
var slide02_url = "bbb.html" ; // スライド2のURL
var slide02_img = "ccc" ; // スライド2の画像名
var slide03_url = "ccc.html" ; // スライド3のURL
var slide03_img = "ccc.jpg" ; // スライド3の画像名
var slide04_url = "ddd.html" ; // スライド4のURL
var slide04_img = "ddd" ; // スライド4の画像名
var slide_url=document.getElementById('slide_link');
slide_url.href=slide01_url;
document.images["slide_img"].src ="/topslide/img/"+slide01_img;
var a = "";
for(var i=1; i<=slideshow; i++){
a = a+"<span onclick='slide_btn(0"+i+")'>"+i+"</span>";
}
document.getElementById('slide_btn').innerHTML=a;
function aq01() {
var box = document.getElementById('slide_img');
box.style.opacity = 0;
}
function aq02() {
var box = document.getElementById('slide_img');
box.style.opacity = 1;
}
function img() {
var slide_url=document.getElementById('slide_link');
slide_url.href=eval("slide0"+slidesnow+"_url;");
document.images["slide_img"].src ="/topslide/img/"+eval("slide0"+slidesnow+"_img;");
}
setInterval(function() {
if(slideflag==1){
if(slidesnow+1<=slideshow){
slidesnow++;
aq01();
setTimeout("img()", 100);
setTimeout("aq02()", 100);
}else{
slidesnow=1; //slidesnowがslideshowを越えたら1に戻る
aq01();
setTimeout("img()", 100);
setTimeout("aq02()", 100);
}
}else{
slideflag = 1 ; //起動フラグを建てる
}
}, 5000); //setInterval()で5秒間隔で繰り返し実行する
function slide_btn(n){
slidesnow = n ;
aq01();
setTimeout("img()", 100);
setTimeout("aq02()", 100);
slideflag = 0 ; //起動フラグを下ろす
}
HTML
<div>
<a href="/" id="slide_link"><img src="仮画像" name="slide_img" id="slide_img"></a>
<p id="slide_btn"></p>
<script language="JavaScript" type="text/JavaScript" src="上記のjs"></script>
</div>
css
#slide_img{
opacity:1;
transition:.1s;
}
#slide_btn{
position:absolute;
width:100%;
background:rgba(0,0,0,0.7);
height:30px;
left:0;
bottom:5px;
text-align:right;
}
#slide_btn span{
margin:0 5px;
color:#fff;
display:inline-block;
padding:1px 6px;
border:1px solid #fff;
position:relative;
bottom:-3px;
opacity:0.7;
cursor:pointer;
}
なｗｗげｗｗぇｗｗｗ
編集箇所はHTML、CSSを適宜と、JavaScript部の上の方。
コメントで注釈ついてるところ。
いつもならHTMLにボタンとなるpやらspanやらを記述し、画像やリンクもHTMLに用意して、できるだけスクリプトの記述量を減らすのですが、更新し易さを考慮した結果こうなりました。
僕としてはかなり利便性を高めたので、これで当分スライドショー組む必要なくなると信じたいです（笑）
ちなみに、フェードもボタンも除けば
setInterval(function() {
if(slidesnow+1<=slideshow){
slidesnow++;
var slide_url=document.getElementById('slide_link');
slide_url.href=eval("slide0"+slidesnow+"_url;");
document.images["slide_img"].src ="/topslide/img/"+eval("slide0"+slidesnow+"_img;");
}else{
slidesnow=1; //slidesnowがslideshowを越えたら1に戻る
var slide_url=document.getElementById('slide_link');
slide_url.href=eval("slide0"+slidesnow+"_url;");
document.images["slide_img"].src ="/topslide/img/"+eval("slide0"+slidesnow+"_img;");
}
}
}, 5000); //setInterval()で5秒間隔で繰り返し実行する
URLの宣言を省略すると、これだけで済んだりします（笑）