基于jquery的图片幻灯展示源码


Posted in Javascript onJuly 15, 2012
//图片幻灯展示 
$(function() { 
var imgPro = { 
imgWidth : 626, //图片宽度 
imgConLength : 0, //图片总长度 
index : 0, //导航锁定索引 
count : 0, //图片数量 
left : 0, //绝对定位left 
pre : -1, //上个图片索引 
curr : 0, //当前图片索引 
next : 1, //下个图片索引 
direction : 1, //自动播放方向 
interTime : 3000//间隔时间 
} 
addImgAlt(imgPro.curr); 
imgPro.count = $('#banner .list a img').length; 
imgPro.imgConLength = imgPro.imgWidth * imgPro.count; 
imgPro.left = parseInt($('#box .list ul').css("left")); 
//播放定时器 
var t = setInterval(imgPlay, imgPro.interTime); 
$('#box .arrowl img, #box .arrowr img,#banner .list a,#box .count li,#box p').hover(function() { 
clearInterval(t); 
}, function() { 
t = setInterval(imgPlay, imgPro.interTime); 
}); 
// 自动播放图片 
function imgPlay() { 
if ((imgPro.next != imgPro.count && imgPro.direction == 1) || (imgPro.pre == -1 && imgPro.direction == -1)) { 
imgPro.direction = 1; 
toNext(); 
} else { 
imgPro.direction = -1; 
toLast(); 
} } 
//点击左方向 
$('#box .arrowl img').click(function() { 
if (imgPro.curr != 0) { 
toLast(); 
} 
}); 
//点击右方向 
$('#box .arrowr img').click(function() { 
if (imgPro.next != imgPro.count) { 
toNext(); 
} 
}); 
//点击导航播放 
$('#box .count li').click(function() { 
imgPro.index = $('#box .count li').index(this); 
if (imgPro.curr != imgPro.index) { 
imgPro.left += (imgPro.curr - imgPro.index) * imgPro.imgWidth; 
addImgAlt(imgPro.index); 
play(); 
$('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.index).addClass('current'); 
imgPro.curr = imgPro.index; 
imgPro.pre = imgPro.index - 1; 
imgPro.next = imgPro.index + 1; 
} 
}); 
//播放 
function play() { 
$('#box .list ul').css({ 
'opacity' : '0.5' 
}).animate({ 
'left' : imgPro.left + "px", 
'opacity' : '1' 
}, 'slow'); 
} 
//添加图片说明信息 
function addImgAlt(index) { 
$("#box p").text($("#banner .list a img").eq(index).attr("alt")); 
} 
//上一张 
function toLast() { 
imgPro.left += imgPro.imgWidth; 
addImgAlt(imgPro.pre); 
play(); 
$('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.pre).addClass('current'); 
imgPro.pre--; 
imgPro.curr--; 
imgPro.next--; 
} 
//下一张 
function toNext() { 
imgPro.left -= imgPro.imgWidth; 
addImgAlt(imgPro.next); 
play(); 
$('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.next).addClass('current'); 
imgPro.pre++; 
imgPro.curr++; 
imgPro.next++; 
} 
});
Javascript 相关文章推荐
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 #Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 #Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 #Javascript
jQuery Tools tab(幻灯片)
Jul 14 #Javascript
jQuery Tools tab使用介绍
Jul 14 #Javascript
jQuery Tools Dateinput使用介绍
Jul 14 #Javascript
jQuery Tools tooltip使用说明
Jul 14 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP链表操作简单示例
2016/10/15 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
jQuery事件详解
2017/02/23 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
python3写的简单本地文件上传服务器实例
2018/06/04 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
PyTorch-GPU加速实例
2020/06/23 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
爱国口号
2014/06/19 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书