基于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脚本的性能的几个注意事项
Dec 22 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
vue npm install 安装某个指定的版本操作
Aug 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php 异常处理实现代码
2009/03/10 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php中函数前加&符号的作用分解
2014/07/08 PHP
php实现可逆加密的方法
2015/08/11 PHP
php实现微信企业转账功能
2018/10/02 PHP
js 分页全选或反选标识实现代码
2011/08/09 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
Python延时操作实现方法示例
2018/08/14 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
python生成器推导式用法简单示例
2019/10/08 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
linux面试题参考答案(10)
2013/11/04 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
shell的种类有哪些
2015/04/15 面试题
煤矿安全生产责任书
2014/04/15 职场文书
行政撤诉申请书
2015/05/18 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技