基于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 相关文章推荐
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
详解Javascript继承的实现
Mar 25 Javascript
canvas绘制多边形
Feb 24 Javascript
vue中英文切换实例代码
Jan 21 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
js实现移动端轮播图滑动切换
Dec 21 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
深入了解php4(2)--重访过去
2006/10/09 PHP
php中的观察者模式
2010/03/24 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
如何提高MySql的安全性
2014/06/19 面试题
反腐倡廉主题教育活动总结
2015/05/07 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
跑吧孩子观后感
2015/06/10 职场文书
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js