buttons是什么意思

为了实现轮播图偏移量。

CSS代码如下

*{

margin:0;

padding:0;

text-decoration:none;

}

body{

padding:20px;

}

#container{

position:relative;

width:600px;

height:400px;

border:3pxsolid#333;

overflow:hidden;

}

#list{

position:absolute;

z-index:1;

width:4200px;

height:400px;

}

#listimg{

float:left;

width:600px;

height:400px;

}

#buttons{

position:absolute;

left:250px;

bottom:20px;

z-index:2;

height:10px;

}

#buttonsspan{

float:left;

margin-right:5px;

width:10px;

height:10px;

border:1pxsolid#fff;

border-radius:50%;

background:#333;

cursor:pointer;

}

#{

background:orangered;

}

.arrow{

position:absolute;

top:180px;

z-index:2;

display:none;

width:40px;

height:40px;

font-size:36px;

font-weight:bold;

line-height:39px;

text-align:center;

color:#fff;

background-color:RGBA(0,0,0,.3);

cursor:pointer;

}

.arrow:hover{

background-color:RGBA(0,0,0,.7);

}

#container:{

display:block;

}

#prev{

left:20px;

}

#next{

right:20px;

}

疑问⼀：谈论⼀下绝对定位和相对定位？

position:relative是相对定位

position:absolute是绝对定位

如果⽗元素没有被赋予相对定位，那么⼦元素的绝对定位是基于⽹页的！

疑问⼆：为什么⽤.7?⽽不是0.7

.arrow:hover{

background-color:RGBA(0,0,0,.7);

}

为了⽅便书写，可以⽤.7替代0.7。

疑问三：⽗元素⽤相对定位，⼦元素为什么⼀定要⽤绝对定位？

⽗元素：

#container{

position:relative;

width:600px;

height:400px;

border:3pxsolid#333;

overflow:hidden;

}

⼦元素：

#list{

position:absolute;

z-index:1;

width:4200px;

height:400px;

}

如何区分⽗元素和⼦元素，即包括起来的，如下图所⽰

所有元素的⽗元素就是container

所有绝对定位都是相对于⽗元素container

JS代码如下

=function(){

varcontainer=mentById('container');

varlist=mentById('list');

varimgLen=mentTagName('img');

varbuttons=mentById('buttons').getElementsByTagName('span');

varprev=mentById('prev');

varnext=mentById('next');

varindex=1;

vartimer;

functionanimate(offt){

//获取的是，是相对左边获取距离，所以第⼀张图后都为负值，

//且获取的是字符串，需要⽤parInt()取整转化为数字。

varnewLeft=parInt()+offt;

=newLeft+'px';

//⽆限滚动判断

if(newLeft>-600){

=-3000+'px';

}

if(newLeft<-3000){

=-600+'px';

}

}

functionplay(){

//重复执⾏的定时器

timer=tInterval(function(){

k();

},2000)

}

functionstop(){

clearInterval(timer);

}

functionbuttonsShow(){

//将之前的⼩圆点的样式清除

for(vari=0;i<;i++){

if(buttons[i].className=="on"){

buttons[i].className="";

}

}

//数组从0开始，故index需要-1

buttons[index-1].className="on";

}

k=function(){

index-=1;

if(index<1){

index=5

}

buttonsShow();

animate(600);

};

k=function(){

//由于上边定时器的作⽤，index会⼀直递增下去，我们只有5个⼩圆点，所以需要做出判断

index+=1;

if(index>5){

index=1

}

animate(-600);

buttonsShow();

};

for(vari=0;i<;i++){

(function(i){

buttons[i].onclick=function(){

/*这⾥获得⿏标移动到⼩圆点的位置，⽤this把index绑定到对象buttons[i]上，去⾕歌this的⽤法*/

/*由于这⾥的index是⾃定义属性，需要⽤到getAttribute()这个DOM2级⽅法，去获取⾃定义index的属性*/

varclickIndex=parInt(ribute('index'));

varofft=600*(index-clickIndex);//这个index是当前图⽚停留时的index

animate(offt);

index=clickIndex;//存放⿏标点击后的位置，⽤于⼩圆点的正常显⽰

buttonsShow();

}

})(i)

}

eover=stop;

eout=play;

play();

}

疑问⼀：为什么⽤?

=function(){

//是为了⽅便在图⽚等必须的加载完以后再执⾏

}

疑问⼆：为什么不把功能合在⼀起呢？

奉⾏：单⼀职责

疑问三：为什么要⾸先获取元素？

=function(){

varcontainer=mentById('container');

varlist=mentById('list');

varbuttons=mentById('buttons').getElementsByTagName('span');

varprev=mentById('prev');

varnext=mentById('next');

varindex=1;

vartimer;

}

获取完元素以后，才可以操作，所以你⾸先要想好要⽤到的。

疑问四：为什么那么多功能函数呢，⽤⼀个也可以的，不是吗？

=function(){

functionanimate(offt){

//动画

}

functionplay(){

//开始

}

functionstop(){

//结束

}

functionbuttonsShow(){

//显⽰按钮(⼩圆点)

}

}

单⼀职责,即功能单⼀，与其它功能不耦合。

functionanimate(offt){

//获取的是，是相对左边获取距离，所以第⼀张图后都为负值，

//且获取的是字符串，需要⽤parInt()取整转化为数字。

varnewLeft=parInt()+offt;

=newLeft+'px';

//⽆限滚动判断

if(newLeft>-600){

=-3000+'px';

}

if(newLeft<-3000){

=-600+'px';

}

}

functionplay(){

//重复执⾏的定时器

timer=tInterval(function(){

k();

},2000)

}

functionstop(){

clearInterval(timer);

}

functionbuttonsShow(){

//将之前的⼩圆点的样式清除

for(vari=0;i<;i++){

if(buttons[i].className=="on"){

buttons[i].className="";

}

}

//数组从0开始，故index需要-1

buttons[index-1].className="on";

}

疑问五：prev（上），next（下）

k=function(){

index-=1;

if(index<1){

index=5

}

buttonsShow();

animate(600);

};

k=function(){

//由于上边定时器的作⽤，index会⼀直递增下去，我们只有5个⼩圆点，所以需要做出判断

index+=1;

if(index>5){

index=1

}

animate(-600);

buttonsShow();

};

点击后图⽚会向左移或者右移...

疑问四：闭包？

for(vari=0;i<;i++){

(function(i){

buttons[i].onclick=function(){

/*这⾥获得⿏标移动到⼩圆点的位置，⽤this把index绑定到对象buttons[i]上，去⾕歌this的⽤法*/

/*由于这⾥的index是⾃定义属性，需要⽤到getAttribute()这个DOM2级⽅法，去获取⾃定义index的属性*/

varclickIndex=parInt(ribute('index'));

varofft=600*(index-clickIndex);//这个index是当前图⽚停留时的index

animate(offt);

index=clickIndex;//存放⿏标点击后的位置，⽤于⼩圆点的正常显⽰

buttonsShow();

}

})(i)

}

闭包格式：

(function(i){

//这⾥放代码

})(i)

为什么需要闭包？

为了不让代码被全局污染，和普通的代码没有什么区别。

疑问五：eover=stop/eout=play什么意思？

eover=stop;

eout=play;

为了放在图⽚上，轮播不再继续，暂停在某张图⽚上。

疑问六：

play();

为什么最后放了⼀个play()，play()函数如果想要被执⾏，就必须调⽤！

优化

⼀.

IE9以下可以⽤tInterval

IE9以上可以⽤requestAnimactionFrame

你可以判断浏览器内核再决定⽤tInterval或requestAnimactionFrame!

⼆.

这⾥可以修改⼀下，改成，再添加⼀个轮播图更简单

三.

这⾥可以⽤js改为动态的增加，根据图⽚的数量

四.

任意图⽚上传，配合后台或者node进⾏⾃动重命名，实现拖⼊图⽚⾃动添加标签以及重命名图⽚。

之后，⼤家有什么优化意见以及想法，可以提出来，⼤家交流交流。