基于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 学习笔记(四)
Dec 31 Javascript
javascript实现密码强度显示
Mar 18 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
javaScript语法总结
Nov 25 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
Vue 实现拨打电话操作
Nov 16 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
PHP include任意文件或URL介绍
2014/04/29 PHP
PHP的引用详解
2015/02/22 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
htm调用JS代码
2007/03/15 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
js中判断控件是否存在
2010/08/25 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery知识点整理
2015/01/30 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
python简单线程和协程学习心得(分享)
2017/06/14 Python
Flask之flask-session的具体使用
2018/07/26 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
基于python检查矩阵计算结果
2020/05/21 Python
python3爬虫中异步协程的用法
2020/07/10 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
创意婚礼策划方案
2014/05/18 职场文书
员工生日活动方案
2014/08/24 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
小学运动会宣传稿
2015/07/23 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
python获取对象信息的实例详解
2021/07/07 Python