基于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 实现双色表格实现代码
Nov 24 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
微信小程序保存图片到相册权限设置
Apr 09 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
基于mysql的bbs设计(四)
2006/10/09 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Python OpenCV获取视频的方法
2018/02/28 Python
美国渔具店:FishUSA
2019/08/07 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
我的求职计划书
2014/01/10 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
部队万能检讨书
2014/02/20 职场文书
会计的岗位职责
2014/03/15 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
2015年服务员工作总结
2015/04/08 职场文书
文艺节目主持词
2015/07/06 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
Python利用FlashText算法实现替换字符串
2022/03/31 Python