基于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 相关文章推荐
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
js表单登陆验证示例
Oct 19 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
JavaScript设计模式之原型模式详情
Jun 21 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
thinkPHP中session()方法用法详解
2016/12/08 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
js里的prototype使用示例
2010/11/19 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
对python 调用类属性的方法详解
2019/07/02 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python的setattr函数实例用法
2020/12/16 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
机关会计岗位职责
2014/04/08 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
节约能源标语
2014/06/17 职场文书
就业协议书
2014/09/12 职场文书
2015年护士工作总结范文
2015/03/31 职场文书