首页>>焦点图>>带小图标的Tab切换焦点图,多图与多文字内容显示(2017-07-01)

带小图标的Tab切换焦点图,多图与多文字内容显示

带小图标的Tab切换焦点图,多图与多文字内容显示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <section class="htmleaf-container">  
  2.     <div class="landing-slider">   
  3.     
  4.       <!--tabSlider-->  
  5.     <div class="tabSlider">  
  6.     <div class="ts-items">   
  7.             
  8.           <!-- Single item -->  
  9.           <div class="ts-item is-active">  
  10.         <div class="ts-banner"> <img src="img/621.jpg" alt="alt goes here" /> </div>  
  11.         <div class="ts-container set-layout thumb-cont">  
  12.               <div class="ts-thumbnail"> <img src="img/iphone.png" alt="alt" /> </div>  
  13.               <div class="ts-content">  
  14.             <div class="ts-title"> consectetur adipiscing elit </div>  
  15.             <a href="" class="ts-btn pull-right set-icon to-right"> <span>Lorem ipsum dolor sit amet</span> <small>Quisque eget tincidunt erat</small> <i class="fa fa-arrow-circle-right"></i> </a> </div>  
  16.             </div>  
  17.       </div>  
  18.             
  19.           <!-- Single item -->  
  20.           <div class="ts-item">  
  21.         <div class="ts-banner"> <img src="img/622.jpg" alt="alt goes here" /></div>  
  22.         <div class="ts-container set-layout thumb-cont">  
  23.               <div class="ts-thumbnail"> <img src="img/s3.png" alt="alt" /> </div>  
  24.               <div class="ts-content">  
  25.             <div class="ts-title"> Title </div>  
  26.             <a href="" class="ts-btn pull-right set-icon to-right"> <span>Quisque eget tincidunt erat</span> <small>Donec dignissim consectetur</small> <i class="fa fa-arrow-circle-right"></i> </a> </div>  
  27.             </div>  
  28.       </div>  
  29.             
  30.           <!-- Single item -->  
  31.           <div class="ts-item">  
  32.         <div class="ts-banner"> <img src="img/623.jpg" alt="alt goes here" /> </div>  
  33.         <div class="ts-container set-layout thumb-cont">  
  34.               <div class="ts-thumbnail"> <img src="img/lumia.png" alt="alt" /> </div>  
  35.               <div class="ts-content">  
  36.             <div class="ts-title"> Lorem ipsum dolor sit amet </div>  
  37.             <a href="" class="ts-btn pull-right set-icon to-right"> <span>Donec dignissim consectetur</span> <small>Praesent at enim vel nibh</small> <i class="fa fa-arrow-circle-right"></i> </a> </div>  
  38.             </div>  
  39.       </div>  
  40.         </div>  
  41.     <nav class="ts-control">  
  42.           <div class="ts-container">  
  43.         <ul>  
  44.               <li class="is-active"><i class="ts-icon auto"></i> <span>Slide 1</span></li>  
  45.               <li><i class="ts-icon medical"></i> <span>Slide 2</span></li>  
  46.               <li><i class="ts-icon food"></i> <span>Slide 3</span></li>  
  47.             </ul>  
  48.       </div>  
  49.         </nav>  
  50.   </div>  
  51.   <!--/tabSlider-->   
  52. </section>  

 


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