Javascriptスライドショーの件にて現在も質問中ですが補足致しま

Question

Javascriptスライドショーの件にて現在も質問中ですが補足致します。
添付画像の緑部分に下部のサムネイル画像をロールオーバーで
表示させたいと思っております。
その際拡大表示も別途できればさらに良いです。
特にデザイン重視ではないので、簡単にサクサク動くものを希望です。
また、同一ブラウザ上に同じようなものを並べており、
頻繁に順番を入れ替えたりもしますので
緑部分をブラウザ上にて位置指定しない方が良いです。
英語も稚拙なため、日本語のわかりやすい説明頂けますと幸いです。
初心者ですがよろしくお願い致します。

yyr446 · Accepted Answer

いろいろ手直しして、とりあえずの最終形が出来たんで勝手にクローズソースは↓を見てね。（例） Canvas Slide By HTML5

Canvas Slide By HTML5 or IE(excanvas.js)

yuu_x · Answer

background-size を使ってもいい。冗談。

yyr446 · Answer

HTML5のCANVAS要素を使って HTMLは↓

----

のように配置する CanvasSlide

肝心のjavascriptはまず、 //var G_vmlCanvasManager; function slide_canvas(cotainer,w,h){ 　this.thumb=cotainer.querySelectorAll("a"); 　this.canvas=document.createElement("canvas"); 　this.canvas.width=w; 　this.canvas.height=h; 　cotainer.querySelector("div").appendChild(this.canvas); // if (typeof(G_vmlCanvasManager) != 'undefined') // this.canvas = G_vmlCanvasManager.initElement(this.canvas); 　this.ctx = this.canvas.getContext('2d'); 　this.ctx.globalAlpha = 0; 　this.main_img = new Image(); 　//↓は初期画像いらなければ不要　this.main_img.src = "/image/mio.jpg?" + new Date().getTime(); 　this.main_img.addEventListener('load',this,false); 　//イベント登録　for(var i=0;i

yyr446 · Answer

＝＝続き＝＝
slide_canvas.prototype.handleEvent = function(event){
　switch (event.type){
　 case 'load':
　　 this.ctx.globalAlpha = 0;
　　 this.fadeIn(this.main_img);
　　 return;
　 case 'mousemove':
　　 this.ctx.globalAlpha = 0;
　　 this.main_img.src=event.target.parentNode.href+"?"+ new Date().getTime();
　　 return;
　 case 'mouseout':
　　 this.fadeOut(this.main_img);
　　 return;
　 case 'click':
　　 event.preventDefault();
　　 return;
　}
}

slide_canvas.prototype.fadeIn = function(img){
　 this.StopFade();
　 var fadeTimer = setInterval((function(that){
　　 return function(){
　　　if (that.ctx.globalAlpha > 0.9) {
　　　　that.globalAlpha = 1;
　　　　that.StopFade(fadeTimer);
　　　}else that.ctx.globalAlpha += 0.1;
　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height);
　　 }
　 })(this),100);
}

slide_canvas.prototype.fadeOut = function(img){
　 this.StopFade();
　 var fadeTimer = setInterval((function(that){
　　 return function(){
　　　if (that.ctx.globalAlpha < 0.1) {
　　　　that.ctx.globalAlpha = 0;
　　　　that.StopFade(fadeTimer);
　　　}else ctx.globalAlpha -= 0.1;
　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height);
　　 }
　 })(this),100);
}

slide_canvas.prototype.StopFade = function(timer){
　 if(timer){
　　　clearInterval(timer);
　　　timer=null;
　　}
}

これで全部。

※全角空白は半角空白になおしてね。

※「excanvas.js」でIEにも対応させようと思ったけど、
addEventListenerとhandleEventメソッドのIEのやり方がわからんかったので
やめた。IEの人はIE9を待とう（もうすぐ）

※fadeTimerという変数は、slide_canvasオブジェクトの中で、this.timer
みたく一つあればよいのかも知れない。

※window.setIntervalメソッドのハンドル関数もイベントハンドラーみたく、
かっこよくオブジェクト(THIS)を渡せないのか．．．．

yyr446 · Answer

古いIE（IE6）でも動くように改造した。
<canvas>未サポートの人は「excanvas.js」が必用。しかもフェード効果無しです。

function slide_canvas(cotainer,w,h){
　this.thumb=cotainer.getElementsByTagName("a");
　this.canvas=document.createElement("canvas");
　this.canvas.width=w;
　this.canvas.height=h;

cotainer.getElementsByTagName("div")[0].appendChild(this.canvas);
　if (typeof(G_vmlCanvasManager) != 'undefined')
　 this.canvas = G_vmlCanvasManager.initElement(this.canvas);
　this.ctx = this.canvas.getContext('2d');
　this.ctx.globalAlpha = 0;

this.main_img = new Image();
　this.main_img.src = "/image/mio.jpg?" + new Date().getTime();
　if('undefined' !== typeof window.addEventListener)
　 this.main_img.addEventListener('load',this,false);
　else if ('undefined' !== typeof window.attachEvent)
　 this.main_img.attachEvent('onload',(function(that){
　　 return function(){that.load_handle(event);}})(this));

for(var i=0;i<this.thumb.length;i++){
　 if('undefined' !== typeof window.addEventListener){
　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('mousemove',this,false);
　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('mouseout',this,false);
　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('click',this,false);
　 }else if ('undefined' !== typeof window.attachEvent){
　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onmousemove',(function(that){
　　 return function(){that.mousemove_handle(event);}})(this));
　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onmouseout',(function(that){
　　 return function(){that.mouseout_handle(event);}})(this));
　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onclick',(function(that){
　　 return function(){that.click_handle(event);}})(this));
　 }
　}

}

＝＝続く＝＝

yyr446 · Answer

＝＝続き＝＝

slide_canvas.prototype.handleEvent = function(event){
　switch (event.type){
　 case 'load':this.load_handle(event);return;
　 case 'mousemove':this.mousemove_handle(event);return;
　 case 'mouseout':this.mouseout_handle(event);return;
　 case 'click':this.click_handle(event);return;
　}
}

slide_canvas.prototype.load_handle = function(event){
　this.ctx.globalAlpha = 0;
　this.fadeIn(this.main_img);
}

slide_canvas.prototype.mousemove_handle = function(event){
　this.ctx.globalAlpha = 0;
　var target = event.target || event.srcElement;
　this.main_img.src=target.parentNode.href+"?"+ new Date().getTime();
}

slide_canvas.prototype.mouseout_handle = function(event){
　this.fadeOut(this.main_img);
}

slide_canvas.prototype.click_handle = function(event){
　if(window.event){
　 event.returnValue = false;
　 event.cancelBubble = true;
　}else{
　　 event.preventDefault();
　}
　//this.popup();
}

slide_canvas.prototype.fadeIn = function(img){
　 this.StopFade();
　 var fadeTimer = setInterval((function(that){
　　 return function(){
　　　if (that.ctx.globalAlpha > 0.9) {
　　　　that.globalAlpha = 1;
　　　　that.StopFade(fadeTimer);
　　　}else that.ctx.globalAlpha += 0.1;
　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height);
　　 }
　 })(this),100);
}

slide_canvas.prototype.fadeOut = function(img){
　 this.StopFade();
　 var fadeTimer = setInterval((function(that){
　　 return function(){
　　　if (that.ctx.globalAlpha < 0.1) {
　　　　that.ctx.globalAlpha = 0;
　　　　that.StopFade(fadeTimer);
　　　}else that.ctx.globalAlpha -= 0.1;
　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height);
　　 }
　 })(this),100);
}

slide_canvas.prototype.StopFade = function(timer){
　 if(timer){
　　　clearInterval(timer);
　　　timer=null;
　 }
}

var my_slide_1 = new slide_canvas(document.getElementById("slide1"),640,480);

終わり
※後はcanvasサイズの自動取得＆リサイズ対応と、クリック時のポップアップ対応
の実装すれば、とりあえず完成。

このソースちょろっと変えれば別に<canvas>でなくてもよさげだ。

yyr446 · Answer

レスがないので、連続回答を勝手に続けます。（※ポップアップとリサイズにも対応した。後、オートスクロールも機能追加すれば使い物になるかも）＝その1＝ Test

Canvas Slide By HTML5 or IE(excanvas.js)

yyr446 · Answer

（その2）
＜＝続き＝＞
//初期画像セット
　this.main_img = new Image();
　this.main_img.src = "/image/mio.jpg?" + new Date().getTime();
//画像ロードイベント登録
　if('undefined' !== typeof window.addEventListener)
　 this.main_img.addEventListener('load',this,false);
　else if ('undefined' !== typeof window.attachEvent)
　 this.main_img.attachEvent('onload',(function(that){
　　 return function(){that.load_handle(event);}})(this));
//サブネールのイベント登録
　for(var i=0;i<this.thumb.length;i++){
　 if('undefined' !== typeof window.addEventListener){
　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('mousemove',this,false);
　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('mouseout',this,false);
　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('click',this,false);
　 }else if ('undefined' !== typeof window.attachEvent){
　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onmousemove',(function(that){
　　 return function(){that.mousemove_handle(event);}})(this));
　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onmouseout',(function(that){
　　 return function(){that.mouseout_handle(event);}})(this));
　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onclick',(function(that){
　　 return function(){that.click_handle(event);}})(this));
　 }
　}
//Windowリサイズのイベント
　 if('undefined' !== typeof window.addEventListener)
　　 window.addEventListener('resize',this,false);
　 else if ('undefined' !== typeof window.attachEvent)
　　 window.attachEvent('onresize',(function(that){
　　 return function(){that.resize_handle(event);}})(this));
//PopUp Windowのイベント
　 if('undefined' !== typeof window.addEventListener)
　　 this.popdiv.addEventListener('click',this,false);
　 else if ('undefined' !== typeof window.attachEvent)
　　 this.popdiv.attachEvent('onclick',(function(that){
　　 return function(){that.click_handle(event);}})(this));

}

＜＝続く＝＞

yyr446 · Answer

（その3）
＜＝続き＝＞
//イベントハンドラーの振り分け（IE以外）
slide_canvas.prototype.handleEvent = function(event){
　switch (event.type){
　 case 'load':this.load_handle(event);return;
　 case 'resize':this.resize_handle(event);return;
　 case 'mousemove':this.mousemove_handle(event);return;
　 case 'mouseout':this.mouseout_handle(event);return;
　 case 'click':this.click_handle(event);return;
　}
}
//イベントハンドラーのメソッドたち

slide_canvas.prototype.load_handle = function(event){
　this.ctx.globalAlpha = 0;
　this.fadeIn(this.main_img);
}

slide_canvas.prototype.resize_handle = function(event){
　this.canvas.width=this.w?this.w:Math.floor(this.cotainer.clientWidth*0.9);
　var height=window.innerHeight||document.documentElement.clientHeight;
　this.canvas.height=this.h?this.h:Math.floor((height-this.clientHeight)*0.9);
　this.ctx.globalAlpha = 0;
　this.fadeIn(this.main_img);
}

slide_canvas.prototype.mousemove_handle = function(event){
　this.ctx.globalAlpha = 0;
　var target = event.target || event.srcElement;
　this.main_img.src=target.parentNode.href+"?"+ new Date().getTime();
}

slide_canvas.prototype.mouseout_handle = function(event){
　this.fadeOut(this.main_img);
}

slide_canvas.prototype.click_handle = function(event){
　if(window.event){
　 event.returnValue = false;
　 event.cancelBubble = true;
　}else{
　　 event.preventDefault();
　}
　var target = event.target || event.srcElement;
　if(target.parentNode.id!="popdiv")
　 this.popup(this.main_img);
　else this.popclose();
}

//CANVAS操作のメソッドたち

slide_canvas.prototype.fadeIn = function(img){
　 this.StopFade();
　 var fadeTimer = setInterval((function(that){
　　 return function(){
　　　if (that.ctx.globalAlpha > 0.9) {
　　　　that.globalAlpha = 1;
　　　　that.StopFade(fadeTimer);
　　　}else that.ctx.globalAlpha += 0.1;
　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height);
　　 }
　 })(this),100);
}

＝＝続くって、もういいかげんにしろってか＝＝

yyr446 · Answer

（その4）＜＝続き＝＞ slide_canvas.prototype.fadeOut = function(img){ 　 this.StopFade(); 　 var fadeTimer = setInterval((function(that){ 　　 return function(){ 　　　if (that.ctx.globalAlpha < 0.1) { 　　　　that.ctx.globalAlpha = 0; 　　　　that.StopFade(fadeTimer); 　　　}else that.ctx.globalAlpha -= 0.1; 　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height); 　　 } 　 })(this),100); } slide_canvas.prototype.StopFade = function(timer){ 　 if(timer){ 　　　clearInterval(timer); 　　　timer=null; 　 } } slide_canvas.prototype.popup = function(img){ 　this.popdiv.appendChild(img); 　document.body.appendChild(this.popdiv); 　this.popdiv.style.top = (window.pageYOffset||document.documentElement.scrollTop)+50+"px"; 　this.popdiv.style.left = (window.pageXOffset||document.documentElement.scrollLeft)+50+"px"; 　this.popdiv.style.display="block"; 　document.body.style.backgroundColor="gray"; } slide_canvas.prototype.popclose = function(){ 　document.body.removeChild(this.popdiv); 　document.body.style.backgroundColor=this.bgcolor; } //var my_slide_1 = new slide_canvas(document.getElementById("slide1"),640,480); var my_slide_1 = new slide_canvas(document.getElementById("slide1")); これでおしまい。たぶん誰も見ないだろうな... 　我輩にも、もっとショートコーディングの技が備わってれば、もっと短く一回の回答で済ませられたかも。

Javascriptスライドショーの件にて現在も質問中ですが補足致しま

<style type="text/css">

HTML5のCANVAS要素を使って

＝＝続き＝＝

古いIE（IE6）でも動くように改造した。

＝＝続き＝＝

レスがないので、連続回答を勝手に続けます。

（その2）

（その3）

（その4）

いろいろ手直しして、とりあえずの

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング