首页>>焦点图>>图片折叠效果 可用于banner焦点图 包括垂直折叠与水平折叠(2014-02-03)

图片折叠效果 可用于banner焦点图 包括垂直折叠与水平折叠

图片折叠效果 可用于banner焦点图 包括垂直折叠与水平折叠
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="sample">      
  2.     <ol class="rounded dark" id="accordion_1" style="width: auto; height: auto; list-style-type: upper-roman">  
  3.         <li>  
  4.             <div>Slide One</div>  
  5.             <div>  
  6.                 <figure>  
  7.                     <img src="img-demo/1.jpg" alt="image" />  
  8.                     <figcaption>Assassini!</figcaption>  
  9.                 </figure>  
  10.             </div>  
  11.         </li>  
  12.         <li>  
  13.             <div>Slide Two</div>  
  14.             <div>  
  15.                 <figure>  
  16.                     <img src="img-demo/2.jpg" alt="image" />  
  17.                     <figcaption>Couldn't find an image of a Khajit thief! Fail!</figcaption>  
  18.                 </figure>  
  19.             </div>  
  20.         </li>  
  21.         <li>  
  22.             <div>Slide Three</div>  
  23.             <div>  
  24.                 <figure>  
  25.                     <img src="img-demo/3.jpg" alt="image" />  
  26.                     <figcaption>That's one angry looking red dude.</figcaption>  
  27.                 </figure>  
  28.             </div>  
  29.         </li>  
  30.         <li>  
  31.             <div>Slide Four</div>  
  32.             <div>  
  33.                 <figure>  
  34.                     <img src="img-demo/4.jpg" width="768" alt="image" />  
  35.                     <figcaption>Was fun for a couple of hours or so...</figcaption>  
  36.                 </figure>  
  37.             </div>  
  38.         </li>  
  39.         <li>  
  40.             <div>Slide Five</div>  
  41.             <div>  
  42.                 <figure>  
  43.                     <img src="img-demo/5.jpg" alt="image" />  
  44.                     <figcaption>Not as good as Hot Pursuit.</figcaption>  
  45.                 </figure>  
  46.             </div>  
  47.         </li>  
  48.     </ol>  
  49.   
  50.     <ol class="stitch" id="accordion_2" style="width: 900px; height: 600px; list-style-type: upper-latin">  
  51.       <li>  
  52.         <div>First one</div>  
  53.             <div>  
  54.   
  55.                 <ol class="vertical stitch" id="accordion_4" style="list-style-type: lower-alpha">   
  56.                   <li>  
  57.                     <div>First one</div>  
  58.                     <div>  
  59.                       <h2>Slide 1</h2>  
  60.                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>  
  61.                       <img src="img-demo/city1.jpg" alt="">  
  62.                     </div>  
  63.                   </li>  
  64.                   <li>  
  65.                     <div>Second</div>  
  66.                     <div>  
  67.                       <h2>Slide 2</h2>  
  68.                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>  
  69.                       <img src="img-demo/city2.jpg" alt="">  
  70.                     </div>  
  71.                   </li>  
  72.                   <li>  
  73.                     <div>Last one in the row</div>  
  74.                     <div>  
  75.                       <h2>Slide 3</h2>  
  76.                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>  
  77.                       <img src="img-demo/city3.jpg" alt="">  
  78.                     </div>  
  79.                   </li>  
  80.                 </ol>  
  81.   
  82.             </div>  
  83.       </li>  
  84.       <li>  
  85.         <div>Second</div>  
  86.         <div>  
  87.           <h2>Slide 2</h2>  
  88.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>  
  89.           <img src="img-demo/city2.jpg" alt="">  
  90.         </div>  
  91.       </li>  
  92.       <li>  
  93.         <div>Last one in the row</div>  
  94.         <div>  
  95.           <h2>Slide 3</h2>  
  96.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>  
  97.           <img src="img-demo/city3.jpg" alt="">  
  98.         </div>  
  99.       </li>  
  100.     </ol>  
  101.       
  102.     <ol class="rounded light" id="accordion_3" style="width: 960px; height: 320px; list-style-type: decimal-leading-zero">  
  103.       <li>  
  104.         <div>First one</div>  
  105.         <div>  
  106.           <h2>Slide 1</h2>  
  107.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>  
  108.           <img src="img-demo/city1.jpg" alt="">  
  109.         </div>  
  110.       </li>  
  111.       <li>  
  112.         <div>Second</div>  
  113.         <div>  
  114.           <h2>Slide 2</h2>  
  115.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>  
  116.           <img src="img-demo/city2.jpg" alt="">  
  117.         </div>  
  118.       </li>  
  119.       <li>  
  120.         <div>Last one in the row</div>  
  121.         <div>  
  122.           <h2>Slide 3</h2>  
  123.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>  
  124.           <img src="img-demo/city3.jpg" alt="">  
  125.         </div>  
  126.       </li>  
  127.     </ol>  
  128.       
  129.   </div>  
  130.   
  131. <script>  
  132.   
  133. (function($, d) {  
  134.       
  135.     $('#accordion_1').conventAccordion({   
  136.             autoPlay: true,  
  137.             startSlide: 1,  
  138.             slideInterval: 5000,  
  139.             pauseOnHover: true,  
  140.             actOnHover: true,  
  141.             continuous: false,  
  142.             autoScaleImages : true,  
  143.             slideSpeed: 3000,  
  144.             easing: 'easeOutBounce'  
  145.     });  
  146.   
  147.     $('#accordion_2').conventAccordion({   
  148.             autoPlay: false,  
  149.             startSlide: 1,  
  150.             slideInterval: 4000,  
  151.             pauseOnHover: true,  
  152.             actOnHover: false,  
  153.             continuous: true,  
  154.             easing: 'easeInOutQuart'  
  155.     });  
  156.   
  157.     $('#accordion_3').conventAccordion({   
  158.             autoPlay: false,  
  159.             slideInterval: 3000,  
  160.             pauseOnHover: true,  
  161.             actOnHover: true,  
  162.             continuous: true,  
  163.             easing: 'easeOutBounce'  
  164.     });  
  165.   
  166.     $('#accordion_4').conventAccordion({   
  167.             autoPlay: false,  
  168.             slideInterval: 3000,  
  169.             pauseOnHover: true,  
  170.             actOnHover: false,  
  171.             continuous: true  
  172.     });  
  173.       
  174. })(jQuery, document);  
  175.   
  176. </script>  

 


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