您的位置:首页> 日志> 前端技术 正文

 

这类图片层滚动效果其实网上脚本很多,但很多过渡都做得不够好。国外普遍用  featureCarousel 或 Roundabout 这两个JQ插件实现。

featureCarousel 这是比较早,也一直在用,Roundabout 出得比较晚,了解下,发现功能、效果和扩展都比featureCarousel 好。

 

1.引入插件

  1. <script type="text/javascript" src="@Url.AppendVersion("~/Content/Main/Tourism/js/jquery-1.7.2.min.js")"></script> 
  2. <script type="text/javascript" src="@Url.AppendVersion("~/Content/Main/Tourism/js/jquery.roundabout.js")"></script> 
  3. <script type="text/javascript" src="@Url.AppendVersion("~/Content/Main/Tourism/js/jquery.roundabout-shapes.js")"></script> 

主脚本 roundabout.js 
副脚本 
roundabout-shapes.js //包含各种预设好的效果

 

2.Html

  1. <!-- 旅游景点 --> 
  2. <div id="gla"> 
  3.   <div id="gla_box"> 
  4.     <div class="hd"><ul></ul></div> 
  5.     <div class="bd"> 
  6.         <span class="prev">&nbsp;</span> 
  7.         <span class="next">&nbsp;</span> 
  8.          <ul class="tList"> 
  9.             @Power.ArticleList("文章头条列表", new { Count = 5Node = "lyjd"TitleLength = 60TopicNum = 5,TopicTitleLength=60TopicContentLength=390Illustrated = trueSort="Priority,PublishTime,ContentId"}) 
  10.         </ul> 
  11.         <ul class="pList"> 
  12.             @Power.ArticleList("文章图片列表" , new { Count=5Node="lyjd"TitleLength=0,ImageWidth=500ImageHeight=320Illustrated = trueSort="Priority,PublishTime,ContentId"}) 
  13.          
  14.         </ul> 
  15.     </div> 
  16.   </div> 
  17. </div> 

文章头条部份的展示并非脚本已经预留好的,需要自己进行同步和扩展。

3.页面脚本

  1. <script type="text/javascript"
  2. $(function(){ 
  3.     $('#gla_box .bd>ul.pList').roundabout({ 
  4.         minOpacity:1, 
  5.         btnNext: ".next"
  6.         duration: 1000, 
  7.         reflect: true
  8.         btnPrev: '.prev'
  9.         autoplay:true
  10.         autoplayDuration:5000, 
  11.         tilt:0, 
  12.         shape: 'figure8'
  13.         btnNextCallback: function() { 
  14.             var index = $("#gla_box .pList").find(".roundabout-in-focus").index(); 
  15.             $("#gla_box .tList li").eq(index).addClass("on").siblings().removeClass("on"); 
  16.             }, 
  17.         autoplayCallback:function() { 
  18.             var index = $("#gla_box .pList").find(".roundabout-in-focus").index(); 
  19.             $("#gla_box .tList li").eq(index).addClass("on").siblings().removeClass("on"); 
  20.             }, 
  21.         btnPrevCallback: function() { 
  22.             var index = $("#gla_box .pList").find(".roundabout-in-focus").index(); 
  23.             $("#gla_box .tList li").eq(index).addClass("on").siblings().removeClass("on"); 
  24.             }, 
  25.         clickToFocusCallback: function() { 
  26.             var index = $("#gla_box .pList").find(".roundabout-in-focus").index(); 
  27.             $("#gla_box .tList li").eq(index).addClass("on").siblings().removeClass("on");
  28.             } 
  29.     }); 
  30. }); 
  31. </script> 

minOpacity  //最远物透明度
maxOpacity  //最近物透明度
duration //过渡完成用时
reflect //反转回旋处理方向

autoplayDuration //设置自动播放下一个间隔时间
shape //使用哪种过滤效果

btnNextCallback //点击下一张时触发
autoplayCallback  //自动播放下一张时触发
btnPrevCallback  //点击上一张时触发
clickToFocusCallback  //点击图片时触发

//因为这里需要和上面的头条同步,所以要同步一下选中效果,不需要可删除

var index = $("#gla_box .pList").find(".roundabout-in-focus").index(); 

$("#gla_box .tList li").eq(index).addClass("on").siblings().removeClass("on");

 

 

4、部份预设效果

figure8 

 

waterWheel

 

nowSlide

 

risingEssence

 

tearDrop