基于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 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
使用js获取身份证年龄的示例代码
Dec 11 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和MySQL保存和输出图片
2006/10/09 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
PHP CURL使用详解
2019/03/21 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
详解如何运行vue项目
2019/04/15 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
Python实现购物车购物小程序
2018/04/18 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
django表单的Widgets使用详解
2019/07/22 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
最美乡村医生事迹材料
2014/06/02 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
初中作文评语
2014/12/25 职场文书
担保贷款承诺书
2015/04/30 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
python自动化八大定位元素讲解
2021/07/09 Python