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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
php escape URL编码
2008/12/10 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
PHP导入导出Excel代码
2015/07/07 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
javascript常用对话框小集
2013/09/13 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
应届本科生推荐信范文
2013/12/25 职场文书
大学毕业寄语大全
2014/04/10 职场文书
食品工程专业求职信
2014/06/15 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis