基于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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
Require.js的基本用法详解
Jul 03 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 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
咖啡知识大全
2021/03/03 新手入门
php生成缩略图的类代码
2008/10/02 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Display SQL Server Version Information
2007/06/21 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
python中format()函数的简单使用教程
2018/03/14 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
一份Java笔试题
2012/02/21 面试题
2013年最新自荐信范文
2014/06/23 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
考博导师推荐信范文
2015/03/27 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
python基于turtle绘制几何图形
2021/06/15 Python
Flask response响应的具体使用
2021/07/15 Python
MySQL分区表管理命令汇总
2022/03/21 MySQL