首页>>Jquery图片>>jquery相册 可以自动播放，缩略图指定位置(2014-03-30)

jquery相册 可以自动播放，缩略图指定位置

jquery相册 可以自动播放，缩略图指定位置
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div style="height:750px;">  
  2.           
  3.          <!-- Click to show gallery  -->  
  4.          <p id="click">   
  5.           <a class='multi-line-button red' href='#' style='width:10em'>   
  6.             <span class='titles'>Show Gallery</span>   
  7.           </a>   
  8.         </p>   
  9.           
  10.         <div id="left_bar">  
  11.               
  12.             <div id="left_boxes">  
  13.                 <!-- copy large image name in id of image without extension . We will get this id and show big image -->  
  14.                   
  15.                 <div class="box"><img src="img/3.jpg" id="3" width="100" /></div>  
  16.                 <div class="box"><img src="img/2.jpg" id="2" width="100" /></div>  
  17.                 <div class="box"><img src="img/1.jpg" id="1" width="100" /></div>  
  18.                   
  19.             </div>  
  20.               
  21.         </div>  
  22.           
  23.         <div id="top_bar">  
  24.               
  25.             <div id="top_boxes">  
  26.                 <!-- copy large image name in id of image without extension . We will get this id and show big image -->  
  27.                 <div class="box"><img src="img/4.jpg" id="4" width="100" /></div>  
  28.                 <div class="box"><img src="img/5.jpg" id="5" width="100" /></div>  
  29.                 <div class="box"><img src="img/6.jpg" id="6" width="100" /></div>  
  30.                 <div class="box"><img src="img/7.jpg" id="7" width="100" /></div>  
  31.                 <div class="box"><img src="img/8.jpg" id="8" width="100" /></div>  
  32.             </div>  
  33.               
  34.         </div>  
  35.           
  36.         <div id="right_bar">  
  37.           
  38.             <div id="right_boxes">  
  39.                 <!-- copy large image name in id of image without extension . We will get this id and show big image -->  
  40.                 <div class="box"><img src="img/9.jpg" id="9" width="100" /></div>  
  41.                 <div class="box"><img src="img/10.jpg" id="10" width="100" /></div>  
  42.                 <div class="box"><img src="img/11.jpg" id="11" width="100" /></div>  
  43.             </div>  
  44.               
  45.         </div>  
  46.           
  47.         <!-- Image Holder Main -->  
  48.         <div id="imagePlacer">  
  49.               
  50.             <span>  
  51.                 <!-- use image name as id of image without extension -->  
  52.                 <img src="img/1b.jpg" width="606" height="413" id="1b" />  
  53.                 <img src="img/2b.jpg" width="606" height="413" style="display:none" id="2b" />  
  54.                 <img src="img/3b.jpg" width="606" height="413" style="display:none" id="3b" />  
  55.                   
  56.                 <img src="img/4b.jpg" width="606" height="413" style="display:none" id="4b" />  
  57.                 <img src="img/5b.jpg" width="606" height="413" style="display:none" id="5b" />  
  58.                 <img src="img/6b.jpg" width="606" height="413" style="display:none" id="6b" />  
  59.                 <img src="img/7b.jpg" width="606" height="413" style="display:none" id="7b" />  
  60.                 <img src="img/8b.jpg" width="606" height="413" style="display:none" id="8b" />  
  61.                 <img src="img/9b.jpg" width="606" height="413" style="display:none" id="9b" />  
  62.                 <img src="img/10b.jpg" width="606" height="413" style="display:none" id="10b" />  
  63.                 <img src="img/11b.jpg" width="606" height="413" style="display:none" id="11b" />  
  64.             </span>  
  65.               
  66.             <!-- images captions -->  
  67.            
  68.               
  69.         </div>  
  70.           
  71.         <div id="controls">  
  72.             <!-- Click to hide gallery  -->  
  73.             <img src="close.png" id="hide" title="Close" />  
  74.             <!-- Play Pause AutoRotate Images  -->  
  75.             <img src="pause.png" id="pause" title="Pause" width="30" />  
  76.             <img src="play.png" id="play" title="Play" width="30" />  
  77.         </div>  
  78.           
  79.         <!-- Bottom Bar  -->  
  80.         <img src="bar.png" id="border" />  
  81.           
  82.         <br clear="all" /><br clear="all" />  
  83.           
  84.     </div>  
  85.       

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_297.html