JavaScript + Ajax 実践サンプル集 - フレキシブルスライドショー

フレキシブルスライドショー

説明補足説明コード関連書籍コメント投稿

このサンプルは、サイズが異なるイメージをスライドショーとして表示します。イメージに説明文を追加したり、リンクを追加することができます。

フレキシブルスライドショーのパラメータ変数

// 配列変数にイメージのパスを格納
variableslide[0]=['images/pix1.jpg', '', '']
variableslide[1]=['images/jsajaxcom.gif', 'http://jsajax.com', 'jsajax.com']
variableslide[2]=['images/pix3.jpg', '', '']

// イメージの幅、高さの最大値と背景色を設定
var slidewidth='350px'  
var slideheight='120px'
var slidebgcolor='#F3F3F3'

// イメージの切り替え間隔をＭＳの単位で設定
var slidedelay=3000 // 3秒

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Flexible Slideshow</title>
</head>
<body>

/***********************************************
* Flexi Slideshow- 
* c Dynamic Drive (www.dynamicdrive.com)
***********************************************/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['images/pix1.jpg', '', '']
variableslide[1]=['images/jsajaxcom.gif', 'http://jsajax.com', 'Welcome to JavaScript + Ajax ...']
variableslide[2]=['images/pix3.jpg', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='350px'  //set to width of LARGEST image in your slideshow 130px
var slideheight='120px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#F3F3F3'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
  var cacheimage=new Image()
  cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
  contentcontainer='<center>'
  if (variableslide[currentslide][1]!="")
    contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
  contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
  if (variableslide[currentslide][1]!="")
    contentcontainer+='</a>'
  contentcontainer+='</center>'
  if (variableslide[currentslide][2]!="")
    contentcontainer+=variableslide[currentslide][2]

if (document.layers){
    crossrotateobj.document.write(contentcontainer)
    crossrotateobj.document.close()
  }
  else if (ie||dom)
    crossrotateobj.innerHTML=contentcontainer
  if (currentslide==variableslide.length-1) currentslide=0
  else currentslide++
  setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
  document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
  crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
  if (document.layers)
    document.slidensmain.visibility="show"
  rotateimages()
}

if (ie||dom)
  start_slider()
else if (document.layers)
  window.onload=start_slider

</script>

</body>
</html>