基于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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
Echarts如何重新渲染实例详解
May 30 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
JS 表单验证大全
2011/11/23 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
深入理解JQuery循环绑定事件
2016/06/02 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
GC是什么?为什么要有GC?
2013/12/08 面试题
测量实习生自我鉴定
2013/09/19 职场文书
建筑施工实习自我鉴定
2013/09/19 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
行政介绍信范文
2015/05/04 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js