slider.js

  1. (function(){
  2. /**
  3. parent //父容器
  4. changeTime //每次间隔几秒切换下一条
  5. leaveTime //鼠标从小图上离开过后几秒继续切换
  6. index //从第几个开始
  7. changeFn //新的显示完全后的回调
  8. hoverFn//鼠标移到小图上的回调
  9. initFn//初始化完成后的回调
  10. dataFormat //数据格式化函数
  11. */
  12. var def = {
  13. changeTime : 5000,
  14. leaveTime : 5000,
  15. index : 0,
  16. dataFormat : function(obj){
  17. return obj;
  18. }
  19. }
  20. function Slider(opt){
  21. opt = opt || {};
  22. for(var p in def){
  23. if(opt[p] === undefined){
  24. opt[p] = def[p];
  25. }
  26. }
  27. this.opt = opt;
  28. this.data = [];
  29. this.idx = this.opt.index || 0;
  30. this.imgArr = [];
  31. this.navArr = [];
  32. this.opt.parent && (this.opt.parent.innerHTML = '');
  33. }
  34. Slider.prototype.setData = function(data){
  35. /**
  36. * img
  37. * thumb
  38. * title
  39. * url
  40. * rgb
  41. */
  42. for(var i=0;i<data.length;i++){
  43. this.data.push(this.opt.dataFormat(data[i]));
  44. }
  45. }
  46. Slider.prototype.init = function(){
  47. var parentDom = this.opt.parent;
  48. parentDom.className = 'slide_imgs';
  49. var imgCon = this.imgCon = document.createElement('div');
  50. imgCon.className = 'imgs_list';
  51. var navCon = this.navCon = document.createElement('div');
  52. navCon.className = 'item_points';
  53. parentDom.appendChild(imgCon);
  54. parentDom.appendChild(navCon);
  55. this.createImg();
  56. this.createThumb();
  57. this.go(this.opt.index);
  58. this.opt.initFn && this.opt.inifFn(this);
  59. }
  60. Slider.prototype.createImg = function(){
  61. var list = this.data , temp ;
  62. for(var i=0;i<list.length;i++){
  63. temp = document.createElement('a');
  64. temp.className = 'img_item';
  65. // temp.style.backgroundColor = 'rgb('+list[i].rgb+')';
  66. temp.style.display = this.opt.index == i ? 'block' : 'none';
  67. if(list[i].url && list[i].url != '#' && list[i].url.indexOf('javascript') == -1){
  68. temp.setAttribute('href',list[i].url);
  69. temp.setAttribute('target','_blank');
  70. }else{
  71. temp.setAttribute('href','javascript:;');
  72. }
  73. temp.style.background = 'url('+list[i].img+') no-repeat center center';
  74. temp.onclick = function(){
  75. this.blur();
  76. }
  77. this.imgCon.appendChild(temp);
  78. this.imgArr.push(temp);
  79. temp.setAttribute('title',list[i].title);
  80. }
  81. }
  82. Slider.prototype.createThumb = function(){
  83. var list = this.data , temp , border , img , that = this , len = list.length;
  84. for(var i=0;i<len;i++){
  85. temp = document.createElement('a');
  86. temp.className = 'point';
  87. (function(idx){
  88. var _idx = idx;
  89. $(temp).hover(function(){
  90. if(idx == that.idx) return;
  91. if(that.timer){
  92. clearTimeout(that.timer);
  93. }
  94. that.go(idx,true);
  95. that.opt.hoverFn && that.opt.hoverFn.call(that,list[idx]);
  96. },function(){
  97. if(that.timer){
  98. clearTimeout(that.timer);
  99. }
  100. that.timer = setTimeout(function(){
  101. if(idx == len -1){
  102. _idx = 0;
  103. }else{
  104. _idx ++;
  105. }
  106. that.go(_idx);
  107. },that.opt.leaveTime);
  108. })
  109. })(i);
  110. this.navCon.appendChild(temp);
  111. this.navArr.push(temp);
  112. temp.setAttribute('title',list[i].title);
  113. }
  114. }
  115. Slider.prototype.next = function(){
  116. var idx = this.idx + 1;
  117. this.go(idx);
  118. }
  119. Slider.prototype.prev = function(){
  120. var idx = this.idx - 1;
  121. this.go(idx);
  122. }
  123. Slider.prototype.go = function(idx,handle){
  124. var len = this.data.length, that = this;
  125. idx = Math.min(Math.max(0,idx),this.data.length - 1);
  126. if(len == 1) {
  127. this.navArr[idx].className = 'point cur';
  128. return;
  129. }
  130. if(this.timer){
  131. clearTimeout(this.timer);
  132. }
  133. var old = this.idx;
  134. if(this.imgArr[old]){
  135. $(this.imgArr[old]).stop(0,0).animate({opacity:0},200,function(){
  136. $(this).hide();
  137. });
  138. this.navArr[old].className = 'point';
  139. this.imgArr[idx].style.display = 'block';
  140. $(this.imgArr[idx]).css('opacity',0);
  141. $(this.imgArr[idx]).stop(0,0).animate({opacity:1},200,function(){
  142. that.opt.changeFn && that.opt.changeFn(that,that.data(idx));
  143. });
  144. this.navArr[idx].className = 'point cur';
  145. this.idx = idx;
  146. if(!handle){
  147. this.timer = setTimeout(function(){
  148. if(idx == len -1){
  149. idx = 0;
  150. }else{
  151. idx ++;
  152. }
  153. that.go(idx);
  154. },this.opt.changeTime);
  155. }
  156. }
  157. }
  158. window.Slider = Slider;
  159. })();

index.js

  1. $(function(){
  2. function createBanner(){
  3. var list = [
  4. {img : '/callcenter.jpg',url:'',title:'客服中心'},
  5. {img : '/imprestcenter.jpg',url:'',title:'充值中心'},
  6. {img : '/safecenter.jpg',url:'',title:'安全中心'},
  7. {img : 'http://gameapi.xiaoyou-game.com/static/usercenter/usercenter.jpg',url:'',title:'用户中心'}
  8. ]
  9. var slider = new Slider({
  10. parent : $('.slide_imgs')[0]
  11. });
  12. slider.setData(list);
  13. slider.init();
  14. }
  15. createBanner();
  16. })

html

  1. <div class="slide_imgs">
  2. </div>

1、在html里面占位置,

2、index.js将轮播图信息写好,

3、新建一个Slider对象,并实例化即可。

jquery 轮播图的更多相关文章

  1. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  2. jQuery轮播图--不使用插件

    说明:引入jquery.min.js    将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  3. jQuery轮播图(手动点击轮播)

    下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...

  4. jQuery轮播图(二)利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

  5. jQuery轮播图(一)轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  6. jquery 轮播图实例

    实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...

  7. 《第31天:JQuery - 轮播图》

    源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个 ...

  8. 超级简单的jquery轮播图demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 支持触屏的jQuery轮播图插件

    移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫. 1.页面代码 <!DOCTYPE html ...

随机推荐

  1. Javascript面向对象编程:构造函数的继承

    今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = & ...

  2. apache2.4域名配置参数

    apache2.4和 2.2版本的配置有区别 2.4的配置如下 <VirtualHost *:80>DocumentRoot /www/web/projectServerName www. ...

  3. mac 找文件

    如何找到 etc 方法1: ! D# D! s2 F" f 七度苹果电脑软件1.打开Finder,按快键盘 Command + Shift + G,即可调出 前往文件夹 ,也可以左上角 找到 ...

  4. 解决ACTIVITI流程图设置字体不生效的问题

    在ACTIVITI 5.15的版本中,有一个设置流程图的字体配置. 配置如下: <bean id="processEngineConfiguration" class=&qu ...

  5. jsp标签之<%%>和<%!%>

    <%! %>中声明的是全局变量,不过写前面最好<% %>中声明的是局部变量.<%=%>一般表达式,输出某一变量的值.例如:<%! String totalSt ...

  6. js基础之ajax

    必须搞懂的几个问题: 1.如何创建ajax对象? 2.如何连接服务器? 3.如何发送请求? 4.监控请求状态的事件是什么?分几个阶段?如何获取返回值? 答:onreadystatechange事件:一 ...

  7. js基础之BOM

    一.window.open 栗子:阿里西西运行代码功能 var oBtn = document.getElementById('btn1'); var oTxt = document.getEleme ...

  8. HDU 3567 Eight II 打表,康托展开,bfs,g++提交可过c++不可过 难度:3

    http://acm.hdu.edu.cn/showproblem.php?pid=3567 相比Eight,似乎只是把目标状态由确定的改成不确定的,但是康托展开+曼哈顿为h值的A*和IDA*都不过, ...

  9. 二模 (2) day2

    第一题: 题目描述: 在一个长方形框子里,最多有 N(0≤N≤6)个相异的点.在其中任何-个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完毕才能放 ...

  10. ROS主题发布订阅控制真实的机器人下位机

    先模拟控制小乌龟 新建cmd_node.ccpp文件: #include"ros/ros.h" #include"geometry_msgs/Twist.h" ...