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

 更新时间:2011年02月12日 17:27:00   作者:  
基于Jquery制作的幻灯片图集效果,文章最后给出了打包下载地址,喜欢的朋友可以测试下。
待改进部分
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.jb51.net/js/2011/Gallery/index.html
打包下载:/201102/yuanma/Gallery_jb51.rar

相关文章

  • Jquery 弹出层插件实现代码

    Jquery 弹出层插件实现代码

    工作不忙,闲来无事写了一个弹出层插件,又需要的尽管拿去用啊有什么建议欢迎提出
    2009-10-10
  • jquery 新建的元素事件绑定问题解决方案

    jquery 新建的元素事件绑定问题解决方案

    如果在domready之后用js动态添加几行,那新增的几行中的这些按钮都将失去任何作用,下面与大家分享四种解决方法
    2014-06-06
  • jQuery学习4 浏览器的事件模型

    jQuery学习4 浏览器的事件模型

    首先要知道DOM的两级模式:DOM0级和DOM2级 在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。
    2010-02-02
  • 基于jquery实现图片放大功能

    基于jquery实现图片放大功能

    这篇文章主要为大家详细介绍了基于jquery实现图片放大功能的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-05-05
  • Jquery实现移动端控制DIV拖拽

    Jquery实现移动端控制DIV拖拽

    这篇文章主要为大家详细介绍了Jquery实现移动端控制DIV拖拽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 基于jquery的表头固定的若干方法

    基于jquery的表头固定的若干方法

    如果Table数据过多,页面必然会拉的很长,固定表头,可以方便用户对照表头项目列表。近日做后台界面时,整理固定表头三种方法
    2011-01-01
  • jQuery实现轮播图效果demo

    jQuery实现轮播图效果demo

    这篇文章主要为大家详细介绍了jQuery实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • ligerUI的ligerDialog关闭刷新的方法

    ligerUI的ligerDialog关闭刷新的方法

    今天小编就为大家分享一篇ligerUI的ligerDialog关闭刷新的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 使用Jquery实现点击文字后变成文本框且可修改

    使用Jquery实现点击文字后变成文本框且可修改

    使用Jquery实现点击文字变为文本框效果,可对文本框文字进行修改,具体的实现思路如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • jquery实现时间选择器

    jquery实现时间选择器

    这篇文章主要为大家详细介绍了jquery实现时间选择器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04

最新评论