本文介绍了用JavaScript实现图像轮播组件，不多废话，只看下面：

效果：

自动循环播放图片，下方有按钮切换到相应的图片。添加动画来切换图片。当鼠标停在图片上时，转盘停止，出现两个左右箭头。点击切换图片。当鼠标离开图片区域时，转盘从当前位置继续。提供一个界面，可以设置转盘的方向、周期、间隔。对HTML和CSS的要求：

div class=' carousel-box ' div class=' carousel ' ul class=' clear fix ' liimg src=' http : img/carousel 01 . jpg ' alt=' '/Li liimg src=' http : img/carousel 02 . jpg ' alt=' '/Li liimg src=' http : img/carousel 03 . jpg ' alt=' '/Li liimg src=' http 3360 img/carousel您可以更改类名并替换css文件中相应的类名。配置组件时传入正确的DOM元素。图片的宽度和数量没有限制，只要改变css文件中的数值即可。/*要更改的值*/。转盘img { width: 600px高度： 400 px；}.旋转木马。转盘箱{ width: 600px/*单张图片的宽度*/高度： 400 px；/*单张图片的高度*/}。转盘ul {宽度： 3600px/*单张图片宽度图片数量*/}原理：

水平排列所有图片，并为最外面的容器和包装容器设置overflow:hidden。最外面的容器用于放置按钮和箭头。使用包容器的scrollLeft属性来控制显示哪个图片。

思考：

要实现这些功能，应该有以下方法：

1.画面切换功能。接受指示滚动方向的参数。调用慢速功能切换图片。调用开关按钮图标功能点亮相应的按钮。

2.慢速功能。

3.打开按钮功能。

4.初始化函数。用于绑定事件、创建按钮和箭头以及初始化初始位置。

5.创建一个箭头函数。

6.创建按钮功能。

7.启动转盘功能。

8.旋转木马功能。

9.停止该功能。用来停止旋转木马。

还有一些常用的方法：$():选择DOM元素。AddClass(ele，' className '):向元素添加类名。RemoveClass(ele，' className ')删除元素的类名。$.add(ele，' type '，fun):将事件绑定到DOM节点。GetCSS(ele，' prop '):获取元素对应属性的值。$.delegatetag ('selector '，' tagname '，' type '，fun):事件代理。

实现：

假设有6张图片，每张宽度为600px。按照功能独立性来完成：

1.慢速功能衬垫

缓和函数的作用是一点一点地改变目标元素的属性值，直到达到目标值。使用它的元素可能是水平旋转的图片、垂直旋转的图片或希望从左端到达页面右端的小框。因此它应该接收四个参数(目标元素、要更改的属性值、目标值、移动次数)。

liner=function(ele，prop，next，num){ var speed=(next-ele[prop])/num，I=0；(函数(){ ele[prop]=速度；我；if(inum){ setTimeout(arguments . caller，30)；} })();},2.点亮按钮功能灯

点亮一个按钮本质上是给按钮添加一个活动类，熄灭一个按钮是从按钮中移除活动类。

那么你怎么知道当前是哪个按钮呢？

最简单的方法是直接获取，这样就可以给每个按钮添加一个索引属性。当需要点亮按钮时，可以将需要点亮的按钮的索引传递给该功能。

那么你怎么知道该按哪个按钮呢？

最简单的方法就是直接获取，这样就可以在范围链的末端添加一个活动的变量，记住当前点亮的按钮，这个函数就可以直接熄灭它。

light=function(index){ remove class(active，' active ')；active=$(this . wrappselec ' ' ' '[index=' index ']')；addClass(active，‘active’)；}3.画面切换功能开始

需要计算下一个滚动的值：

如果它向左移动，scrollLeft应该是-600。如果已经是0，就会切换到3000。所以是ele.scrollLeft===0？宽度*(len-1): ele . scrolleft-width；

如果是向右移动，scrollLeft应该是600，也就是0——600，60033541200， 300033540.可以如上判断，也可以使用公式next=(curdistance)%(distance * num)。也就是(ele。向左滚动宽度(%)(宽度*镜头)

您需要获取要点亮的下一个按钮的索引：

就像计算scrollLeft的想法一样，向左移动：index===0？len-1: index-1；向右移动：(索引1)%len

go=function(dire){ var index=active . GetAttribute(' index ')-0，nextIndex，nextPositionif(dire===' next '){ nextIndex=(index 1)% len；next position=(ele . scrollLeft width)%(width * len)；}else{ nextIndex=index===0？len-1:index-1，nextPosition=ele.scrollLeft===0？width * len : ele . scrolleft-width；} light(NextIndex)；animate.liner(ele，' scrollLeft '，next position)；} len(图片总数)、width(图片宽度)和ele (package container)也由其他函数访问，因此它们也被添加到范围链的末尾。

len=ele . getelementsbytagname(' img ')。长度

width=parsent(getCSS(ele . getelementsbytagname(' img ')[0]，' width ')；

Ele=$(eleSelec)，eleSelec是包容器的选择器，例如。旋转木马

4.创建箭头功能创建箭头

创建一个左箭头，绑定事件处理程序，并将其向左移动。创建一个向右箭头来绑定向右移动的事件处理程序。

create arrow=function(){ var prev=document . createelement(' div ')，next=document . createelement(' div ')；prev . appendchild(document . createtextnode(“”))；next . appendchild(document . createtextnode(“”))；prev .类名='箭头prev '；next.className='箭头next '；container . appendchild(prev)；container.appendChild(下一个)；addClass(容器，‘hide’)；$.add(next，' click '，function(){ go(' next ')；});$.add(prev，' click '，function(){ go(' prev ')；});}container代表最外面的容器，将被其他函数访问，因此它也被添加到范围链的末尾。

Container=$ (wrapselec)，wrapselec是最外层容器的选择器，例如。转盘盒

5.创建按钮函数createBtn

向每个按钮添加索引以打开和关闭，并向按钮组添加类名以设置样式并获取它：

create Btn=function(){ var div=document . create element(' div ')，btns=for(var I=0；伊琳；I){ btns=' a href=' # ' index=' I ' '/a '；} div.innerHTML=btnsaddClass(div，' carousel-BTN ')；container . appendchild(div)；}6.转盘功能

根据要求(顺时针和逆时针)，决定是叫go('prev ')还是go('next ')。

如果需要循环，请再次呼叫自己。如果不循环，旋转一圈就停止。

所以这里需要一个变量来判断方向，一个变量来判断是不是圆形，一个变量来计数。

因此，在范围链的末尾又添加了四个变量。方向、循环、计数和开始用于清除计时器。

circle=函数(){ countif(loop | | count len){ if(direction==' forward '){ go(' next ')；} else { go(' prev ')；} } begin=setTimeout(arguments . calleeper，t)；}7.停止功能停止

stop=function(){ cleartime out(begin)；}8.初始化函数init

如果是第一次使用轮播，创建按钮和箭头，将click事件处理程序绑定到按钮上(获取被点击的按钮索引，点亮，切换到对应的图片)，然后顺时针或逆时针显示对应的图片和按钮。

因此，需要在范围链的末尾添加一个变量来指示它是否已经初始化。

init=function(){ createBtn()；create arrow()；$.delegateTag(wrapSelec ' ')。carousel-btn '，' a '，' click '，function(e，target){ $。预防(e)；light(target . GetAttribute(' index '))；animate.liner(ele，' scrollLeft '，target . GetAttribute(' index ')* width)；});$.add(container，' mouseenter '，function(){ stop()；removeClass(容器，“隐藏”)；});$.add(container，‘mouse leave’，function(){ addClass(container，‘hide’))；begin=setTimeout(圆，t)；});if(方向==='向前'){ light(0)；} else { light(len-1)；ele.scrollLeft=宽度*(len-1)；} haveStart=true}9.启动转盘功能启动

该功能用作控制转盘方向、间隔和循环的界面。计数器归零。

因为可以重复启动转盘，所以每次启动前都需要清除计时器。

start=function(dir，th，lo){ stop()；计数=0；方向=dirt=th * 1000loop=loif(！hasstart){ init()；} begin=setTimeout(圆圈，t)；}至此，所有必需的函数都已编写完成。如果将这些函数和所需的变量抛出到一个函数中，并将包装在外部容器盒中的容器的类名或ID传递给它，那么这个函数将返回一个包含start和stop方法的对象，这个组件就可以使用了。

但是，有一个问题是只有一个函数，即一个页面只能有一个轮播实例。因此，如果您想要一个页面的两个轮播实例使用这个组件，就不能将它们放入一个函数中。那你就只能放在对象里了。每个对象都有自己的变量，它们共享一组方法。

那么这些变量就不能直接访问，需要通过对象的属性，也就是这个来访问。

这个时候，就会出现问题。这是指调用它的环境，所以当这些变量在事件处理程序或计时器中被访问时，您不能使用它，而是创建一个闭包。

也就是说，当你能得到这个的时候，把这个赋值给一个变量，然后在事件处理程序或者定时器中访问这个变量，你就会得到正确的对象。

以init函数为例进行修改：

carousel proto . init=function(){ var那=thisthis . createBtn()；this . create arrow()；$.delegate tag(this . wrappselec ' ')。carousel-btn '，' a '，' click '，function(e，target){ $。预防(e)；that . light(target . GetAttribute(' index '))；animate.liner(that.ele，' scrollLeft '，target . GetAttribute(' index ')* that . width)；});$.add(this.container，' mouseenter '，function(){ that . stop()；removeClass(that.container，' hide ')；});$.add(this.container，' mouseleave '，function(){ addClass(that . container，' hide ')；that . begin=setTimeout(function(){ that . circle()；}，即. t)；});if(this . direction===' forward '){ this . light(0)；} else { this . light(this . len-1)；this . ele . scrolleft=this . width *(this . len-1)；} this.haveStart=true};修改后，您可以创建实例。每个实例都有自己的属性来记录状态，它们都共享原型中的方法。

如果采用原型继承，可以创建一个对象作为实例的原型对象，然后创建一个函数来生成实例：

var carousel proto={ }；//给这个对象carousel proto上面的方法。光线=.旋转木马原型。go=.旋转木马原型。停止=.//创建一个实例对象函数var carousel=function (eleselec，wrap selec){ var the=object。创建(转盘原型)；that . wrappselec=wrappselec；that . ele=$(eleSelec)；that . container=$(wrappselec)；that . len=that . ele . getelementsbytagname(' img ')。长度；that . width=parsent(getCSS(that . ele . getelementsbytagname(' img ')[0]，' width '))；归还那个；}//使用组件var carousel 1=carousel(')创建一个实例。旋转木马“，”。转盘箱’)；旋转木马1.start('forward '，3，true)；var carousel 2=carousel(' . carousel 2 '，'。转盘-盒子2’)；carousel2.start('backward '，2，true)；性能优化：

1.当点击的按钮恰好是当前点亮的按钮时，light和animate.liner仍将被调用一次。所以可以加一个判断语句。如果您单击的按钮恰到好处，请不要执行以下操作。

$.delegate tag(this . wrappselec ' ')。carousel-btn '，' a '，' click '，function(e，target){ $。预防(e)；var index=target . GetAttribute(' index ')；if(index===that . active . GetAttribute(' index '){ return } that . light(index)；animate.liner(that.ele，' scrollLeft '，target . GetAttribute(' index ')* that . width)；});2.当画面切换时，慢速动画正在执行。如果在慢速动画结束前点击按钮或箭头，就会进入下一个动画，然后就会出现画面混乱和错位的情况。性能也会受到影响。为了防止这种情况发生，可以使用一个变量来记录慢速动画是否正在执行。如果不是，将通过单击按钮或箭头来执行该功能。

liner=function(ele，prop，next){ var speed=(next-ele[prop])/10，I=0；ele.animating=true(函数(){ ele[prop]=速度；我；if(i10){ setTimeout(arguments . callee，60)；} else { ele.animating=false} })();}if(！this . ele . animation){ this . light(next index)；animate.liner(this.ele，' scrollLeft '，next position)；}源代码：源代码下载演示

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。