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的时候要仔细。

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

DeskViewer基于Silverlight 2.0开发的个性相册展示系统
这是一个DeskViewer基于Silverlight 2.0开发的个性相册展示系统,通过XML取得图片和音乐的数据,图片的排列是随机的,可以重排,可以对图片的缩放.旋转.拖放.链接.下载.显示原图等 ...
Asp.net MVC3.0 入门指南 7.1 展示查找页面
添加一个查找方法和查找视图在这一节我们将实现一个SearchIndex响应方法,允许您按流派或名字查找电影. 它利用网址/Movies/SearchIndex.请求将展示一个HTML页面,它包含为了 ...
php图片左右滚动代码怎么写,css图片滚动代码怎么写？轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...
vue利用 vue-animate-number插件动态展示数字（从0动态滚动到指定数字）
vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字) 第一步:安装vue-animate-number插件 $ npm install vue-animate-n ...
html中鼠标移动有下拉图片,JQuery自适应全屏图片滚动鼠标上下滑动效果代码
特效描述:JQuery 自适应全屏图片滚动鼠标上下滑动效果.JQuery:全屏随鼠标滑动而滚动代码结构 1. 引入JS 2. HTML代码 $(function(){ $('body,html' ...
PhotoSwipe.js 相册展示插件学习
PhotoSwipe.js官网:http://photoswipe.com/ ,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. ...
python3d相册源代码_js和CSS3炫酷3D相册展示
js和CSS3炫酷3D相册展示 *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overfl ...
dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
QQ空间相册展示特效
<!doctype html> <html lang="en"> <head> <title>QQ空间相册展示特效<title ...

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

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

最新文章

热门文章