隨筆 - 11 
文章 - 2 
trackbacks - 0


           
	

          

          
	
		
          
			
          
	
          
		
          <2007年7月>
          
	
          日一二三四五六
          24252627282930
          1234567
          891011121314
          15161718192021
          22232425262728
          2930311234
          

          

          
			
			

          常用鏈接
          


          留言簿(1)
          




		
          隨筆檔案
          
		
				
			
	
		
          相冊
          
		
				
			
	




          搜索
          

            
	
          • 
		
          •  
	
            • 

          


          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


          		
	

          

          
	
					


          
	
	
          <!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>
          
	

          







          
	    
    




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
	



          



    







          
        
	




主站蜘蛛池模板：
连南|
抚顺县|
永新县|
牟定县|
韩城市|
永吉县|
安顺市|
新干县|
祁东县|
达尔|
南和县|
东港市|
淳安县|
土默特左旗|
阿拉善右旗|
静安区|
阿拉善盟|
深水埗区|
房山区|
略阳县|
湖南省|
山东省|
青浦区|
迁安市|
阿图什市|
萨嘎县|
福州市|
大名县|
景德镇市|
肃宁县|
衡阳市|
长武县|
阳曲县|
德州市|
平凉市|
隆化县|
中阳县|
崇义县|
东源县|
迭部县|
黔西县|