基于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 相关文章推荐
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
JavaScript异步操作中串行和并行
Nov 20 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
zend framework多模块多布局配置
2011/02/26 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
python xml解析实例详解
2016/11/14 Python
python中defaultdict的用法详解
2017/06/07 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python生成带有表格的图片实例
2019/02/03 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
python实现超级玛丽游戏
2020/03/18 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
工伤事故赔偿协议书
2014/10/27 职场文书
泰坦尼克号观后感
2015/06/04 职场文书