JQuery分屏指示器图片轮换效果实例


Posted in Javascript onMay 21, 2015

本文实例讲述了JQuery分屏指示器图片轮换效果实现方法。分享给大家供大家参考。具体分析如下:

在Web App大行其道的今天,分屏指示器用得非常广泛,从Android、到腾讯的Web OS等等。分屏指示器给人很好的用户体验,下面就实现一个分屏指示器,用于实现图片的简单轮换效果,仅抛砖引玉~

代码如下:

<script type="text/javascript">
   var curr = 0, next = 0, count = 0;
   $(document).ready(function () {
     // 记录图片的数量 
     count = $('#img_list a').size();
     t = setInterval('imgPlay()', 3000);
     // 鼠标移动到图片或导航上停止播放,移开后恢复播放 
     $('#imgs li, #img_list a').hover(function () {
       clearInterval(t);
     }, function () {
       t = setInterval('imgPlay()', 3000);
     });
     //点击导航播放到相应的图片 
     $('#img_list a').click(function () {
       // index()函数返回当前导航的下标
       var index = $('#img_list a').index(this);
       if (curr != index) {
         play(index);
         curr = index;
       };
       return false;
     });
   });
   // 播放图片的函数
   var imgPlay = function () {
     next = curr + 1;
     // 若当前图片播放到最后一张,这设置下一张要播放的图片为第一张图片的下标
     if (curr == count - 1) next = 0;
     play(next);
     curr++;
     // 在当前图片的下标加1后,若值大于最后一张图片的下标,则设置下一轮其实播放的图片下标为第一张图片的下标,而next永远比curr大1
     if (curr > count - 1) { curr = 0; next = curr + 1; }
   };
   // 控制播放效果的函数
   var play = function (next) {
     // 当前的图片滑到左边-500px,完成后返回到右边490px
     // 下一张图片滑到0px处,完成后导航的焦点切换到下一个点上
     $('#imgs li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '-530px', 'opacity': '1' }, 'slow', function () {
       $(this).css({ 'left': '520px' });
     }).end()
.eq(next).animate({ 'left': '0px', 'opacity': '1' }, 'slow', function () {
  $('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');
});
   };
 </script>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
jQuery聚合函数实例
May 21 #Javascript
js获取页面description的方法
May 21 #Javascript
js同源策略详解
May 21 #Javascript
js设置document.domain实现跨域的注意点分析
May 21 #Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 #Javascript
jQuery插件expander实现图片翻转特效
May 21 #Javascript
简单分析javascript面向对象与原型
May 21 #Javascript
You might like
PHP下判断网址是否有效的代码
2011/10/08 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
类似框架的js代码
2006/11/09 Javascript
javascript编程起步(第六课)
2007/01/10 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
JS前端笔试题分析
2016/12/19 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
python中global用法实例分析
2015/04/30 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python谱减法语音降噪实例
2019/12/18 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
我未来的职业规划范文
2014/01/11 职场文书
超市商业计划书
2014/05/04 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
建党伟业观后感
2015/06/01 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
Python字符串格式化方式
2022/04/07 Python
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python