基于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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 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
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
express启用https使用小记
2019/05/21 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
Python实现程序的单一实例用法分析
2015/06/03 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
Jupyter加载文件的实现方法
2020/04/14 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
python 利用zmail库发送邮件
2020/09/11 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
群众路线教育实践活动方案
2014/02/02 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏