JS 基于面向对象的 轮播图1

---恢复内容开始---

 1 ‘use strict‘
 2 function Tab(id){
 3     if(!id)return;
 4     this.oBox = document.getElementById(id);
 5     this.aBtn = this.oBox.getElementsByTagName(‘input‘);
 6     this.aDiv = this.oBox.getElementsByTagName(‘div‘);
 7     this.iNow = 0;
 8     this.init();
 9 }
10 Tab.prototype.init = function(){
11     var _this = this;
12     for(var i=0;i<this.aBtn.length;i++){
13         this.aBtn[i].index = i;
14         this.aBtn[i].onclick=function(){
15             _this.iNow = this.index;
16             _this.tab();
17         };
18     }
19 };
20 Tab.prototype.tab = function(){
21     for(var i=0;i<this.aBtn.length;i++){
22         this.aBtn[i].className=‘‘;
23         this.aDiv[i].className=‘‘;
24     }
25     this.aBtn[this.iNow].className=‘on‘;
26     this.aDiv[this.iNow].className=‘on‘;
27 };

  

时间: 2024-08-01 18:08:59

JS 基于面向对象的 轮播图1的相关文章

JS 基于面向对象的 轮播图2

<script> // 函数不能重名, --> 子函数 // is defined function --> 函数名是否写错了 function AutoTab(id) { Tab.apply(this, arguments); this.timer = null; this.inits(); // this.autoPlay(); } AutoTab.prototype = new Tab(); AutoTab.prototype.constructor = AutoTab; /

基于css制作轮播图的部分效果

在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将向大家介绍一种最近实验出来的一种方法. 在介绍这种方法之前,本人觉得对于css中的某些伪类选择器有必要进行进一步的分析. hover这个伪类选择器表示的是当鼠标移动到元素上时元素的反应.这一特性与js中的mousemove事件十分的相近,那么其是不是可以被近视地看做该事件呢?下面我们来做一个例子:

移动端原生js,css3实现轮播图

一.功能需求 1.自动播放2.滑动切换3.点击切换 二.思路分析 html代码: <div class="container"> <ul class="list clearfix"> <li class="item fl item5">图5</li> <li class="item fl item1">图1</li> <li class="

js+html+css实现轮播图

首先先把轮播图的结构搭建起来(html),代码如下:  结构可自行搭建,结构搭建完接着就是用css去进行修饰美化   此时的ul是没有给它设置固定的宽和高的,高可以先设置,宽不能,等下让图片一张接一张一的动起来,实际上是改变了ul的left值,ul的宽可以通过图片(li)的宽 乘以 图片数量即可得到,但是不能写死,所以ul的宽我们用js去获取设置,一起看下现在的效果 好了,结构已经搭建完了,现在只是静态的,我们需要用js去让它动起来,我们先获取html中需要用到的元素并把它存给变量,这里我事先存

js功能实现top轮播图

作用:向左滚动的轮播图 参数:主容器的id 调用方式:直接拷贝调用方法 function autoPlay(id){ var scroll=document.getElementById(id); var ul=scroll.children[0] var num=0 var timer=null; timer=setInterval(autoGoing,20); //滚动轴方法 function autoGoing(){ num--; num<=-1200 ? num=0:num; ul.st

js写的简单轮播图

这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放,离开自动播放6.移动到导航上,切换相对应的导航 然后贴代码: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume

基于BootStrap的轮播图

准备 先设计一个承载轮播图的区域:四周向外阴影.扁平圆角: 1 #myShuffArea{ 2 width: 50%; 3 height: 300px; 4 border: solid 1px gainsboro; 5 border-radius:5%; 6 /*x:0,y:0就是四周*/ 7 box-shadow: 0px 0px 10px 5px lightgrey; 8 } 向该区域内放入轮播内容: 1 <body> 2 <div class="container&quo

如何用面向对象的思维去封装一个小型轮播图插件

1.面向对象与面向过程 既然说到面向对象的思维,那就免不了要对面向过程的编程思维与面向对象的思维做一番比较. 笔者有 一段时间天真的认为有一个类,然后new一个对象就是面向对象编程了,现在想想还是太naive了呀. 其实面向对象的编程思维和面向过程的编程思维重要的不是对象和过程,而是思维. 比如说在生活中我们要做一道西红柿炒鸡蛋,很多人的第一反应就是西红柿炒鸡蛋第一步.第二步.第三步应该怎么做,每一步放什么调料.然后在做的过程中找每一步需要的调料.这就是很典型的面向过程的思维方式:怎么做,需要什

基于Jquery实现的轮播图

前阵子我用js写了一个轮播图,现在的话换成jQuery来实现,先看看效果图 首先是html结构,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery版图片轮播</title> <link rel="stylesheet" href="css/index.css" /> &l