基于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 16 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
javascript获取元素的计算样式
May 24 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 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
PHP中防止SQL注入实现代码
2011/02/19 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python对html代码进行escape编码的方法
2015/05/04 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python遍历路径破解表单的示例
2020/11/21 Python
基于Python实现天天酷跑功能
2021/01/06 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
生产部管理制度
2014/01/31 职场文书
小学毕业演讲稿
2014/04/25 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
java泛型通配符详解
2021/07/25 Java/Android