<fieldset id="wsmyo"></fieldset>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://http://www.w3.org/TR/html4/strict.dtd"><html><head> <title>圖片滾動</title> <style type="text/css"><!-- body{ background-image:url('../../ background-repeat:no-repeat; padding-top:80px; } #dhtmlgoodies_slideshow{ width:600px; /* Total width of slideshow */ } #previewPane{ border:1px solid #CCCCCC; margin-bottom:10px; text-align:center; vertical-align:middle; padding-top:10px; background-color:#CCC; position:relative; /* CSS HACK */ height: 432px; /* IE 5.x */ height/* */:/**/420px; /* Other browsers */ height: /**/420px; } #previewPane img{ line-height:400px; } #previewPane #largeImageCaption{ /* CSS styling of image caption below large image */ font-style:italic; text-align:center; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */ font-size:0.9em; } #galleryContainer{ height:102px; /* Height of the http://www.sanda.com.cn/new/image + 2 */ border:1px solid #CCCCCC; position:relative; overflow:hidden; padding:1px; /* CSS HACK */ height: 104px; /* IE 5.x - Added 2 pixels for border left and right */ height/* */:/**/102px; /* Other browsers */ height: /**/102px; } #arrow_left{ position:absolute; left:0px; z-index:10; background-color: #FFF; padding:1px; } #arrow_right{ position:absolute; right:0px; z-index:10; background-color: #FFF; padding:1px; } #theImages{ position:absolute; height:100px; left:40px; width:100000px; } #theImages #slideEnd{ float:left; } #theImages img{ float:left; padding:1px; filter: alpha(opacity=50); opacity: 0.5; cursor:pointer; border:0px; } #waitMessage{ display:none; position:absolute; left:200px; top:150px; background-color:#FFF; border:3px double #000; padding:4px; color:#555; font-size:0.9em; font-family:arial; } #theImages .imageCaption{ display:none; }--></style> <script type="text/javascript" > var displayWaitMessage=true; // Display a please wait message while http://www.sanda.com.cn/new/image are loading? var activeImage = false; var imageGalleryLeftPos = false; var imageGalleryWidth = false; var imageGalleryObj = false; var maxGalleryXPos = false; var slideSpeed = 0; var imageGalleryCaptions = new Array(); function startSlide(e) { if(document.all)e = event; var id = this.id; this.getElementsByTagName('IMG')[0].src = ' + this.id + '_over.gif'; if(this.id=='arrow_right'){ slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5); slideSpeed = -1*slideSpeedMultiply; slideSpeed = Math.max(-10,slideSpeed); }else{ slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5); slideSpeed = 1*slideSpeedMultiply; slideSpeed = Math.min(10,slideSpeed); if(slideSpeed<0)slideSpeed=10; } } function releaseSlide() { var id = this.id; this.getElementsByTagName('IMG')[0].src = ' + this.id + '.gif'; slideSpeed=0; } function gallerySlide() { if(slideSpeed!=0){ var leftPos = imageGalleryObj.offsetLeft; leftPos = leftPos/1 + slideSpeed; if(leftPos>maxGalleryXPos){ leftPos = maxGalleryXPos; slideSpeed = 0; } if(leftPos<minGalleryXPos){ leftPos = minGalleryXPos; slideSpeed=0; } imageGalleryObj.style.left = leftPos + 'px'; } setTimeout('gallerySlide()',20); } function showImage() { if(activeImage){ activeImage.style.filter = 'alpha(opacity=50)'; activeImage.style.opacity = 0.5; } this.style.filter = 'alpha(opacity=100)'; this.style.opacity = 1; activeImage = this; } function initSlideShow() { document.getElementById('arrow_left').onmousemove = startSlide; document.getElementById('arrow_left').onmouseout = releaseSlide; document.getElementById('arrow_right').onmousemove = startSlide; document.getElementById('arrow_right').onmouseout = releaseSlide; imageGalleryObj = document.getElementById('theImages'); imageGalleryLeftPos = imageGalleryObj.offsetLeft; imageGalleryWidth = document.getElementById('galleryContainer').offsetWidth - 80; maxGalleryXPos = imageGalleryObj.offsetLeft; minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft; var slideshowImages = imageGalleryObj.getElementsByTagName('IMG'); for(var no=0;no<slideshowImages.length;no++){ slideshowImages[no].onmouseover = showImage; } var divs = imageGalleryObj.getElementsByTagName('DIV'); for(var no=0;no<divs.length;no++){ if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML; } gallerySlide(); } function showPreview(imagePath,imageIndex){ var subImages = document.getElementById('previewPane').getElementsByTagName('IMG'); if(subImages.length==0){ var img = document.createElement('IMG'); document.getElementById('previewPane').appendChild(img); }else img = subImages[0]; if(displayWaitMessage){ document.getElementById('waitMessage').style.display='inline'; } document.getElementById('largeImageCaption').style.display='none'; img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); }; img.src = imagePath; } function hideWaitMessageAndShowCaption(imageIndex) { document.getElementById('waitMessage').style.display='none'; document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex]; document.getElementById('largeImageCaption').style.display='block'; } window.onload = initSlideShow; </script></head><body><div id="dhtmlgoodies_slideshow"> <div id="galleryContainer"> <div id="arrow_left"><img src="></div> <div id="arrow_right"><img src="></div> <div id="theImages"> <!-- Thumbnails --> <a href="#"><img src="></a> <a href="#"><img src="></a> <a href="#"><img src="></a> <a href="#"><img src="></a> <a href="#"><img src="></a> <a href="#"><img src="></a> <a href="#"><img src="></a> <a href="#" ><img src="></a> <!-- End thumbnails --> <!-- Image captions --> <div class="imageCaption">圖片1</div> <div class="imageCaption">圖片 2</div> <div class="imageCaption">圖片 3</div> <div class="imageCaption">圖片4</div> <div class="imageCaption">圖片 5</div> <div class="imageCaption">圖片 6</div> <div class="imageCaption">圖片 7</div> <div class="imageCaption">圖片 8</div> <!-- End image captions --> <div id="slideEnd"></div> </div> </div></div></body></html>
<fieldset id="0kqee"></fieldset>
<ul id="0kqee"></ul>