基于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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
详解CocosCreator消息分发机制
Apr 16 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php仿discuz分页效果代码
2008/10/02 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
laravel学习教程之关联模型
2016/07/30 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python单例模式实例分析
2015/04/08 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python将回车作为输入内容的实例
2018/06/23 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
"引用"与多态的关系
2013/02/01 面试题
中软国际Java程序员机试题
2012/08/19 面试题
平面设计自荐信
2013/10/07 职场文书
校本教研工作制度
2014/01/22 职场文书
预备党员的自我评价
2014/03/12 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
golang日志包logger的用法详解
2021/05/05 Golang
浅析Python中的随机采样和概率分布
2021/12/06 Python