基于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 相关文章推荐
html下载本地
Jun 19 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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+mysql写的留言本
2006/10/09 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
vue生成token并保存到本地存储中
2018/07/17 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
Python入门篇之正则表达式
2014/10/20 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
为什么python比较流行
2020/06/19 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
某公司Java工程师面试题笔试题
2016/03/27 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
行政助理岗位职责
2013/11/10 职场文书
大学生村官事迹材料
2014/01/21 职场文书
工艺员岗位职责
2014/02/11 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
会计系毕业求职信
2014/08/07 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
财务部岗位职责范本
2015/04/14 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android