首页>>焦点图>>一帧显示多个不同图片和链接的焦点图效果(2014-08-04)

一帧显示多个不同图片和链接的焦点图效果

 可以用于不同的视频展示较好

一帧显示多个不同图片和链接的焦点图效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="slide_screen">  
  2.         <ul class="list">  
  3.             <li class="liA">  
  4.                 <div class="window">                 
  5.                     <div class="piece">   
  6.                         <a target="_blank" href="#"><img alt="" src="images/583-342-01.png"></a>  
  7.                         <div class="bar">  
  8.                             <h3>为了孩子，全场1毛钱</h3>  
  9.                             <p>正版童话引进，小朋友必看世界名著与经典！</p>  
  10.                             <span></span>  
  11.                             <a target="_blank" href="#"> </a>  
  12.                         </div>  
  13.                     </div>  
  14.                     <div class="piece">  
  15.                         <a target="_blank" href="#"><img alt="" src="images/583-342-02.png"></a>  
  16.                         <div class="bar">  
  17.                             <h3> 旅游英语会话 </h3>  
  18.                             <p>即学即会，易学易懂</p>  
  19.                             <span></span>   
  20.                             <a target="_blank" href="#"> </a>  
  21.                         </div>  
  22.                     </div>  
  23.                     <div class="piece">  
  24.                         <a target="_blank" href="#"><img alt="" src="images/583-342-03.png"></a>  
  25.                         <div class="bar">  
  26.                             <h3>做次有钱人</h3>  
  27.                             <p>大玩“萌”系喜感升级，穷屌丝征服白富美！</p>  
  28.                             <span></span>   
  29.                             <a target="_blank" href="www.lanrentuku.com"> </a>   
  30.                         </div>  
  31.                     </div>  
  32.                 </div>  
  33.             </li>  
  34.             <li class="liB">  
  35.                 <div class="window">                  
  36.                     <div class="piece">  
  37.                         <a target="_blank" href="#"><img alt="" src="images/199-169-01.png"></a>  
  38.                         <div class="bar">  
  39.                             <h3>美颜瘦脸瑜伽</h3>  
  40.                             <p>轻松速变完美小脸</p>  
  41.                             <span></span> <a target="_blank" href="#"> </a>   
  42.                         </div>  
  43.                     </div>  
  44.                     <div class="piece">   
  45.                         <a target="_blank" href="#"><img alt="" src="images/199-169-02.png"></a>  
  46.                         <div class="bar">  
  47.                             <h3>艺术设计原理</h3>  
  48.                             <p>苏州大学教授主讲</p>  
  49.                             <span></span>   
  50.                             <a target="_blank" href="#"> </a>   
  51.                         </div>  
  52.                     </div>  
  53.                     <div class="piece">   
  54.                         <a target="_blank" href="#"><img alt="" src="images/199-169-03.png"></a>  
  55.                         <div class="bar">  
  56.                             <h3>消失的子弹</h3>  
  57.                             <p>谢霆锋、刘青云大斗法！</p>  
  58.                             <span></span>   
  59.                             <a target="_blank" href="#"> </a>   
  60.                         </div>  
  61.                     </div>  
  62.                 </div>  
  63.             </li>  
  64.             <li class="liC">  
  65.                 <div class="window">  
  66.                     <div class="piece">   
  67.                         <a target="_blank" href="#"><img alt="" src="images/199-169-04.png"></a>  
  68.                         <div class="bar">  
  69.                             <h3>手穴按摩疗法</h3>  
  70.                             <p>操作简单，一学就会！</p>  
  71.                             <span></span>   
  72.                             <a target="_blank" href="#"> </a>   
  73.                         </div>  
  74.                     </div>  
  75.                     <div class="piece">   
  76.                         <a target="_blank" href="#"><img alt="" src="images/199-168-05.png"></a>  
  77.                         <div class="bar">  
  78.                             <h3>葡萄酒文化与鉴赏</h3>  
  79.                             <p>青岛大学教授主讲</p>  
  80.                             <span></span>   
  81.                             <a target="_blank" href="#"> </a>   
  82.                         </div>  
  83.                     </div>  
  84.                     <div class="piece">   
  85.                         <a target="_blank" href="#"><img alt="" src="images/199-169-06.png"></a>  
  86.                         <div class="bar">  
  87.                             <h3>人在囧途</h3>  
  88.                             <p>两个倒霉蛋的疯狂旅程！</p>  
  89.                             <span></span>   
  90.                             <a target="_blank" href="#"> </a>   
  91.                         </div>  
  92.                     </div>  
  93.                 </div>  
  94.             </li>  
  95.             <li class="liD">  
  96.                 <div class="window">              
  97.                     <div class="piece">   
  98.                         <a target="_blank" href="#"><img alt="" src="images/198-342-01.png"></a>  
  99.                         <div class="bar">  
  100.                             <h3>好妈妈胜过好老师</h3>  
  101.                             <p>养出好孩子的秘诀！</p>  
  102.                             <span></span>   
  103.                             <a target="_blank" href="#"> </a>   
  104.                         </div>              
  105.                     </div>  
  106.                     <div class="piece">   
  107.                         <a target="_blank" href="#"><img alt="" src="images/198-342-02.png"></a>  
  108.                         <div class="bar">  
  109.                             <h3>敦煌石窟壁画鉴赏</h3>  
  110.                             <p>走进世界文化瑰宝</p>  
  111.                             <span></span>   
  112.                             <a target="_blank" href="#"> </a>   
  113.                         </div>  
  114.                     </div>  
  115.                     <div class="piece">   
  116.                         <a target="_blank" href="#"><img alt="" src="images/198-342-03.png"></a>  
  117.                         <div class="bar">  
  118.                             <h3>大海啸之鲨口逃生</h3>  
  119.                             <p>鲨鱼来袭，全城动员！</p>  
  120.                             <span></span>   
  121.                             <a target="_blank" href="#"> </a>   
  122.                         </div>         
  123.                     </div>  
  124.                 </div>  
  125.             </li>  
  126.         </ul>  
  127.         <ul class="libtn">  
  128.             <li _index="1" class="selected"></li>  
  129.             <li _index="2" class=""></li>  
  130.             <li _index="3" class=""></li>  
  131.         </ul>  
  132.     </div>  

 


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