MVC3.0图片滚动和相册展示(下)

首先：加上js文件和css样式文件jquery.ad-gallery.css，参照(MVC3.0图片上传的js 文件)。

其次:在view层套用相应的div样式，即可实现滚动。可以选择滚动方式，左右，垂直，渐进，动态，还可以选择使用幻灯片方式进行预览

使用jquery 相应控制，即:

jquery 控制滚动方式 Code

 1                //滚动方式
 2                 <select id="switch-effect">
 3                     <option value="slide-hori">水平滚动</option>
 4                     <option value="slide-vert">垂直滚动</option>
 5                     <option value="resize">动态变化</option>
 6                     <option value="fade">渐进渐出</option>
 7                 </select>
 8                 &nbsp; <a href="#" id="toggle-slideshow">显示/隐藏幻灯片开关</a> &nbsp;
 9 
10 
11 
12             // jquery代码
13  $(function ()
14     {
15         $(".thumb").LoadThumImage(true, 60);
16         var galleries = $('.ad-gallery').adGallery();
17         $('#switch-effect').change(
18                 function ()
19                 {
20                     galleries[0].settings.effect = $(this).val();
21                     return false;
22                 }
23             );
24         $('#toggle-slideshow').click(
25                 function ()
26                 {
27                     galleries[0].slideshow.toggle();
28                     return false;
29                 }
30         );
31     });

在view层套用相应div

套用div Code

 1 <div id="gallery" class="ad-gallery">
 2                 <div class="ad-image-wrapper">
 3                     <img class="showPhoto" />
 4                 </div>
 5                 <div class="ad-controls">
 6                 </div>
 7                 <div class="ad-nav">
 8                     <div class="ad-thumbs">
 9                         <ul class="ad-thumb-list">
10                             图片循环遍历显示，记住：样式！！<img src="" class="thumb" alt="" />
11                         </ul>
12                     </div>
13                 </div>
14             </div>

当加载的相册图片不显示的时候，温馨提示一张封面”相册暂无图片“！

最后，有关的相册的分类和编辑，就直接对DB的操作。

总结：关键在于搜索相应的相册模式，有些网上的代码存在兼容性或者js报错的情况。同事经筛选选择此模板，感谢同事！

在嵌套相应的div的时候要仔细。