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

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

1.引入插件

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

主脚本 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"> span> 
7.         <span class="next"> span> 
8.          <ul class="tList"> 
9.             @Power.ArticleList("文章头条列表", new { Count = 5, Node = "lyjd", TitleLength = 60, TopicNum = 5,TopicTitleLength=60, TopicContentLength=390, Illustrated = true, Sort="Priority,PublishTime,ContentId"}) 
10.         ul> 
11.         <ul class="pList"> 
12.             @Power.ArticleList("文章图片列表" , new { Count=5, Node="lyjd", TitleLength=0,ImageWidth=500, ImageHeight=320, Illustrated = true, Sort="Priority,PublishTime,ContentId"}) 
13.          
14.         ul> 
15.     div> 
16.   div> 
17. div> 

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

3.页面脚本

1. "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.  

minOpacity  //最远物透明度
maxOpacity  //最近物透明度
duration //过渡完成用时
reflect //反转回旋处理方向
autoplayDuration //设置自动播放下一个间隔时间
shape //使用哪种过滤效果

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

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

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

4、部份预设效果

figure8 

waterWheel

nowSlide

risingEssence

tearDrop