基于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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
初识Node.js
Sep 03 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
JS实现的排列组合算法示例
Jul 16 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 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读取excel文件的简单实例
2013/08/26 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python获取mp3文件信息的方法
2015/06/15 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
如何转换一个字符串到enum值
2014/04/12 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
商业门面租房协议书
2014/11/25 职场文书
法院个人总结
2015/03/03 职场文书
领导视察通讯稿
2015/07/18 职场文书
班主任培训研修日志
2015/11/13 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers