首页>>焦点图>>jquery宽屏焦点图片动画轮播代码(2024-06-26)

jquery宽屏焦点图片动画轮播代码

jquery宽屏焦点图片动画轮播代码
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="revolution-slider">  
  2.             <ul>  
  3.                  <li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">  
  4.                     <!--  BACKGROUND IMAGE -->  
  5.                     <img src="images-slider/wide3.jpg" alt="" />  
  6.   
  7.                     <!-- THE CAPTIONS IN THIS SLIDE -->  
  8.                     <div class="tp-caption sfl"  
  9.                         data-x="-130"  
  10.                         data-y="150"  
  11.                         data-speed="300"  
  12.                         data-start="300"  
  13.                         data-easing="easeOutBack">  
  14.                         <img src="images-slider/rb.png" alt="">  
  15.                     </div>  
  16.   
  17.                     <div class="tp-caption med-white lfl"  
  18.                         data-x="0"  
  19.                         data-y="145"  
  20.                         data-speed="300"  
  21.                         data-start="800"  
  22.                         data-easing="easeOutExpo">  
  23.                         Inspira designed for  
  24.                     </div>  
  25.   
  26.                     <div class="caption sfb very-big-white"  
  27.                         data-x="0"  
  28.                         data-y="190"  
  29.                         data-speed="300"  
  30.                         data-start="1200"  
  31.                         data-easing="easeOutExpo">  
  32.                         winner  
  33.                     </div>  
  34.   
  35.   
  36.                     <div class="tp-caption small-white lfr"  
  37.                         data-x="0"  
  38.                         data-y="255"  
  39.                         data-speed="300"  
  40.                         data-start="1600"  
  41.                         data-easing="easeOutExpo">  
  42.                         <a href="#" class="btn btn-large btn-primary">Purchase Now</a>  
  43.                     </div>  
  44.   
  45.   
  46.                     <div class="tp-caption lfb"  
  47.                         data-x="390"  
  48.                         data-y="40"  
  49.                         data-speed="1000"  
  50.                         data-start="2000"  
  51.                         data-easing="easeOutExpo"  
  52.                         data-endeasing="fade"  
  53.                         >  
  54.                         <img src="images-slider/guy-shadow.png" alt="">  
  55.                     </div>  
  56.   
  57.                     <div class="tp-caption small-white lft"  
  58.                         data-x="240"  
  59.                         data-y="0"  
  60.                         data-speed="2000"  
  61.                         data-start="2600"  
  62.                         data-easing="easeOutExpo">  
  63.                         <img src="images-slider/spotlight.png" alt="">  
  64.                     </div>  
  65.   
  66.                     <div class="tp-caption fade"  
  67.                         data-x="390"  
  68.                         data-y="40"  
  69.                         data-speed="2000"  
  70.                         data-start="2600"  
  71.                         data-easing="easeOutExpo">  
  72.                         <img src="images-slider/guy.png" alt="">  
  73.                     </div>  
  74.                 </li>  
  75.                   
  76.                 <!-- THE FIRST SLIDE -->  
  77.                 <li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">  
  78.                     <!--  BACKGROUND IMAGE -->  
  79.                     <img src="images-slider/wide1.jpg" alt="" />  
  80.   
  81.                     <!-- THE CAPTIONS IN THIS SLIDE -->  
  82.                     <div class="caption large_text sfb"  
  83.                         data-x="300"  
  84.                         data-y="207"  
  85.                         data-speed="300"  
  86.                         data-start="800"  
  87.                         data-easing="easeOutExpo">  
  88.                         <img src="images-slider/our-features.png" alt="">  
  89.                     </div>  
  90.   
  91.                     <div class="tp-caption sfr"  
  92.                         data-x="220"  
  93.                         data-y="115"  
  94.                         data-speed="300"  
  95.                         data-start="1000"  
  96.                         data-easing="easeOutBack">  
  97.                         <img src="images-slider/lu.png" alt="">  
  98.                     </div>  
  99.   
  100.                     <div class="tp-caption sfr"  
  101.                         data-x="110"  
  102.                         data-y="85"  
  103.                         data-speed="300"  
  104.                         data-start="1200"  
  105.                         data-easing="easeOutBack">  
  106.                         <img src="images-slider/clean.png" alt="">  
  107.                     </div>  
  108.   
  109.                     <div class="tp-caption sfr"  
  110.                         data-x="180"  
  111.                         data-y="217"  
  112.                         data-speed="300"  
  113.                         data-start="1400"  
  114.                         data-easing="easeOutBack">  
  115.                         <img src="images-slider/lm.png" alt="">  
  116.                     </div>  
  117.   
  118.                     <div class="tp-caption sfr"  
  119.                         data-x="0"  
  120.                         data-y="217"  
  121.                         data-speed="300"  
  122.                         data-start="1600"  
  123.                         data-easing="easeOutBack">  
  124.                         <img src="images-slider/responsive.png" alt="">  
  125.                     </div>  
  126.   
  127.                     <div class="tp-caption sfr"  
  128.                         data-x="220"  
  129.                         data-y="285"  
  130.                         data-speed="300"  
  131.                         data-start="1800"  
  132.                         data-easing="easeOutBack">  
  133.                         <img src="images-slider/lb.png" alt="">  
  134.                     </div>  
  135.   
  136.                     <div class="tp-caption sfr"  
  137.                         data-x="40"  
  138.                         data-y="345"  
  139.                         data-speed="300"  
  140.                         data-start="2000"  
  141.                         data-easing="easeOutBack">  
  142.                         <img src="images-slider/bootstrap.png" alt="">  
  143.                     </div>  
  144.   
  145.                     <div class="tp-caption sfl"  
  146.                         data-x="625"  
  147.                         data-y="115"  
  148.                         data-speed="300"  
  149.                         data-start="2200"  
  150.                         data-easing="easeOutBack">  
  151.                         <img src="images-slider/ru.png" alt="">  
  152.                     </div>  
  153.   
  154.                     <div class="tp-caption sfl"  
  155.                         data-x="730"  
  156.                         data-y="85"  
  157.                         data-speed="300"  
  158.                         data-start="2400"  
  159.                         data-easing="easeOutBack">  
  160.                         <img src="images-slider/solid.png" alt="">  
  161.                     </div>  
  162.   
  163.                     <div class="tp-caption sfl"  
  164.                         data-x="650"  
  165.                         data-y="217"  
  166.                         data-speed="300"  
  167.                         data-start="2600"  
  168.                         data-easing="easeOutBack">  
  169.                         <img src="images-slider/rm.png" alt="">  
  170.                     </div>  
  171.   
  172.                     <div class="tp-caption sfl"  
  173.                         data-x="770"  
  174.                         data-y="217"  
  175.                         data-speed="300"  
  176.                         data-start="2800"  
  177.                         data-easing="easeOutBack">  
  178.                         <img src="images-slider/lightweight.png" alt="">  
  179.                     </div>  
  180.   
  181.                     <div class="tp-caption sfl"  
  182.                         data-x="625"  
  183.                         data-y="285"  
  184.                         data-speed="300"  
  185.                         data-start="3000"  
  186.                         data-easing="easeOutBack">  
  187.                         <img src="images-slider/rb.png" alt="">  
  188.                     </div>  
  189.   
  190.                     <div class="tp-caption sfl"  
  191.                         data-x="730"  
  192.                         data-y="345"  
  193.                         data-speed="300"  
  194.                         data-start="3200"  
  195.                         data-easing="easeOutBack">  
  196.                         <img src="images-slider/fresh.png" alt="">  
  197.                     </div>  
  198.                 </li>  
  199.   
  200.                 <li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">  
  201.                     <!--  BACKGROUND IMAGE -->  
  202.                     <img src="images-slider/wide2.jpg" alt="" />  
  203.   
  204.                     <!-- THE CAPTIONS IN THIS SLIDE -->  
  205.                     <div class="tp-caption sfl"  
  206.                         data-x="-130"  
  207.                         data-y="100"  
  208.                         data-speed="300"  
  209.                         data-start="300"  
  210.                         data-easing="easeOutBack">  
  211.                         <img src="images-slider/rb.png" alt="">  
  212.                     </div>  
  213.   
  214.                     <div class="caption sfb"  
  215.                         data-x="0"  
  216.                         data-y="130"  
  217.                         data-speed="300"  
  218.                         data-start="800"  
  219.                         data-easing="easeOutExpo">  
  220.                         <img src="images-slider/inspira.png" alt="">  
  221.                     </div>  
  222.   
  223.                     <div class="tp-caption med-white sfl"  
  224.                         data-x="0"  
  225.                         data-y="220"  
  226.                         data-speed="300"  
  227.                         data-start="1000"  
  228.                         data-easing="easeOutExpo">  
  229.                         Most Complete Template Ever  
  230.                     </div>  
  231.   
  232.                     <div class="tp-caption small-white sfr"  
  233.                         data-x="0"  
  234.                         data-y="260"  
  235.                         data-speed="300"  
  236.                         data-start="1200"  
  237.                         data-easing="easeOutExpo">  
  238.                         <a href="#" class="btn btn-large btn-primary">Purchase Now</a>  
  239.                     </div>  
  240.   
  241.                     <div class="tp-caption small-white lfb"  
  242.                         data-x="300"  
  243.                         data-y="40"  
  244.                         data-speed="1000"  
  245.                         data-start="1400"  
  246.                         data-easing="easeOutExpo">  
  247.                         <img src="images-slider/slider-10.png" alt="" />  
  248.                     </div>  
  249.                 </li>  
  250.                  
  251.             </ul>  
  252.         </div>  

 


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