基于Jquery制作的幻灯片图集效果打包下载


Posted in Javascript onFebruary 12, 2011

待改进部分
1.大图可根据浏览器分辨率自动缩放,目前是按照固定的宽和高显示,超出部分隐藏。
2.大图现在是直接载入了所有,若图片很多时,体验不好。可改为异步加载,或者延迟加载,这个可以用jquery控件lazyload实现。
3.缩略图是根据上传时设定的参数直接生成的,如果是竖形图片,会出现被压缩的情况。可以改为只显示局部,超出部分隐藏。
4.缩略图列表的滑动采用了jcarousellite插件,如果将幻灯片提取为插件的话,需要整合为一个。
5.目前大图区域和缩略图区域是相对独立的,优点是比较直观,可以自行随便更改显示位置,缺点是HTML的代码量较多,不像有些插件,只需要$("#ID")一下就可以了。
JS代码

<script type="text/javascript"> 
var currentImage; 
var currentIndex = -1; 
//显示大图(参数index从0开始计数) 
function showImage(index) { 
//更新当前图片页码 
$(".CounterCurrent").html(index + 1); 
//隐藏或显示向左向右鼠标手势 
var len = $('#OriginalPic img').length; 
if (index == len - 1) { 
$("#aNext").hide(); 
} 
else { 
$("#aNext").show(); 
} 
if (index == 0) { 
$("#aPrev").hide(); 
} 
else { 
$("#aPrev").show(); 
} 
//显示大图 
if (index < $('#OriginalPic img').length) { 
var indexImage = $('#OriginalPic p')[index]; 
//隐藏当前的图 
if (currentImage) { 
if (currentImage != indexImage) { 
$(currentImage).css('z-index', 2); 
$(currentImage).fadeOut(0, function () { 
$(this).css({ 'display': 'none', 'z-index': 1 }) 
}); 
} 
} 
//显示用户选择的图 
$(indexImage).show().css({ 'opacity': 0.4 }); 
$(indexImage).animate({ opacity: 1 }, { duration: 200 }); 
//更新变量 
currentImage = indexImage; 
currentIndex = index; 
//移除并添加高亮 
$('#ThumbPic img').removeClass('active'); 
$($('#ThumbPic img')[index]).addClass('active'); 
//设置向左向右鼠标手势区域的高度 
//var tempHeight = $($('#OriginalPic img')[index]).height(); 
//$('#aPrev').height(tempHeight); 
//$('#aNext').height(tempHeight); 
} 
} 
//下一张 
function ShowNext() { 
var len = $('#OriginalPic img').length; 
var next = currentIndex < (len - 1) ? currentIndex + 1 : 0; 
showImage(next); 
} 
//上一张 
function ShowPrep() { 
var len = $('#OriginalPic img').length; 
var next = currentIndex == 0 ? (len - 1) : currentIndex - 1; 
showImage(next); 
} 
//下一张事件 
$("#aNext").click(function () { 
ShowNext(); 
if ($(".active").position().left >= 144 * 5) { 
$("#btnNext").click(); 
} 
}); 
//上一张事件 
$("#aPrev").click(function () { 
ShowPrep(); 
if ($(".active").position().left <= 144 * 5) { 
$("#btnPrev").click(); 
} 
}); 
//初始化事件 
$(".OriginalPicBorder").ready(function () { 
ShowNext(); 
//绑定缩略图点击事件 
$('#ThumbPic li').bind('click', function (e) { 
var count = $(this).attr('rel'); 
showImage(parseInt(count) - 1); 
}); 
}); 
</script>

在线演示:http://demo.3water.com/js/2011/Gallery/index.html
打包下载:/201102/yuanma/Gallery_3water.rar
Javascript 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
React Fragment介绍与使用详解
Nov 11 Javascript
小程序自定义轮播图圆点组件
Jun 25 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 #Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 #Javascript
在vs2010中调试javascript代码方法
Feb 11 #Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 #Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 #Javascript
juqery 学习之五 文档处理 插入
Feb 11 #Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 #Javascript
You might like
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
vue移动端路由切换实例分析
2018/05/14 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
从零学Python之hello world
2014/05/21 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
python多线程用法实例详解
2015/01/15 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Python修改DBF文件指定列
2020/12/19 Python
企业内控岗位的职责
2014/02/07 职场文书
校园安全广播稿
2014/02/08 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
应届毕业生求职信
2014/05/26 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
导游词之河北邯郸
2019/09/12 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server