jq实现方向轮播图-简易版
2015-10-29 20:10
756 查看
如此直接用js既可以实现目的
/*轮播图显示*/ function play(){ _index ++; $(".adv-img").animate({left: (-1200) * _index},300,function(){ if(_index >= Maximg){ $(".adv-img").css("left","0px"); _index = 0; } $(".adv-mov > span").eq(_index).addClass("show").siblings().removeClass("show"); }); } cleartime = setInterval(function(){ play(); },3000); $(".adv-float").hover(function(){ clearInterval(cleartime); },function(){ cleartime = setInterval(play,3000); }); $(".adv-mov > span").click(function(){ var inx = $(this).index(); _index = inx - 1; play(); });
对于图片的增加可以通过一个变量直接控制代码中的数据
/*初始化列表*/ var _index = 0,Maximg = 2; for(var i = 0 ;i <= Maximg;i ++){ $(".adv-img > ul").append("<li><img src='images/ZY" + (i % Maximg + 1) + ".jpg'/></li>"); }
相关文章推荐
- redis学习网址
- kill process
- LeetCode---Binary Tree Postorder Traversal
- Android中string-array用法
- 黑马程序员------java基础
- 奇偶个数
- shell script 学习笔记-----标准输出
- 使用友元,编译出错fatal error C1001: INTERNAL COMPILER ERROR (compiler file 'msc1.cpp', line 1786) 的解决
- ArrayList源码分析(jdk1.8)
- 理解 BindService 与 StartService
- html5上传图片php特殊处理一下
- OL2中重置地图DIV大小后地图的联动
- 第九周项目3-稀疏矩阵的三元组表示的实现及应用(1)
- 新浪微博模拟登录(Java)
- THU数据结构编程作业一:真二叉树重构(Proper Rebuild)
- 加载网络图片
- OL2中重置地图DIV大小后地图的联动
- 如何在AS3中引用swf中的元件、图片等资源以及布局信息
- 二叉树的遍历--递归和非递归
- POJ 2247 小DP?