ど素人から毛を生やす。<延>

シンプルで更新が簡単なjsスライドショー

Web > javascript 2014年1月30日(最終更新:3年前)

このページは2014.1.30に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
最近、妙に夢見の悪い餅。です。
大学4年の正月休みに資格必須の集中講義を寝過ごし逃すとか、なにこのリアル過ぎてワロエナイ夢…。

さて、今回はJavaScriptについて。

スライドショーをjsで作ることになりました。
画像が入れ替わって、それにリンクが伴っている単純なものです。

ただし、割と更新が頻繁に行われる上、更新するのはJavascriptにあまり詳しくない人です。

しかも、できるだけJavaScriptの編集だけで更新を行いたいとのこと。

それでいて、なぜかjQuery使用不可。

これは、なかなか難題かもしれぬ…

てなわけで、こんなん作りました。
ソース長ぇw

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;
	}

なwwげwwぇwww

編集箇所は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の宣言を省略すると、これだけで済んだりします(笑)

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)