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正确获取元素样式详解
Aug 07 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
Seajs的学习笔记
Mar 04 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
微信小程序实现bindtap等事件传参
Apr 08 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
pandas通过loc生成新的列方法
2018/11/28 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
留学推荐信怎么写
2014/01/25 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
婚礼司仪主持词
2014/03/14 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
MySQL系列之六 用户与授权
2021/07/02 MySQL
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python