基于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 相关文章推荐
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
Vue关于组件化开发知识点详解
May 13 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
关于php fread()使用技巧
2010/01/22 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
Python中的localtime()方法使用详解
2015/05/22 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
python字典按照value排序方法
2020/12/28 Python
python 制作网站小说下载器
2021/02/20 Python
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
十八大报告观后感
2014/01/28 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
解约证明模板
2015/06/19 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
python实现会员管理系统
2022/03/18 Python