第JavaScript基于面向?qū)ο髮崿F(xiàn)的無縫滾動輪播示例

本文實例講述了JavaScript基于面向?qū)ο髮崿F(xiàn)的無縫滾動輪播。分享給大家供大家參考，具體如下：

無縫輪播面向?qū)ο?/p>

一、HTML及CSS部分同前文《原生JavaScript實現(xiàn)的無縫滾動功能》。

JavaScript面向?qū)ο蟛糠秩缦拢?/p>

functionSeamless(obj){

this.obj=document.getElementById(obj);

this.oXSlide=GLOBAL.Dom.getElementsByClassName(J_XSlide,this.obj)[0];

this.li=this.oXSlide.getElementsByTagName(li

this.liTabs=GLOBAL.Dom.getElementsByClassName(tabs,this.obj)[0].getElementsByTagName(li

this.iNow=0;

this.timer=null;

this.playTime=2000;

this.init();

Stotype={

//初始化

init:function(){

var_this=this;

this.timer=setInterval(function(){

_this.autoPlay();

},this.playTime);

this.overOut();

this.tab();

tab:function(){

var_this=this;

varbtn=GLOBAL.Dom.getElementsByClassName(btn,this.obj);

this.oXSlide.style.width=this.li.length*this.li[0].offsetWidth+px

for(vari=0,len=this.liTabs.length;ilen;i++){

this.liTabs[i].index=i;

GLOBAL.Event.addHandler(this.liTabs[i],mouseover,function(){

_this.showItem(this.index);

GLOBAL.Event.addHandler(btn[0],click,function(){

_this.moveLeft();

GLOBAL.Event.addHandler(btn[1],click,function(){

_this.moveRight();

//移入移出時，輪播暫停與開始

overOut:function(){

var_this=this;

GLOBAL.Event.addHandler(this.obj,mouseover,function(){

clearInterval(_this.timer);

GLOBAL.Event.addHandler(this.obj,mouseout,function(){

_this.timer=setInterval(function(){

_this.autoPlay();

},_this.playTime);

autoPlay:function(){

this.moveRight();

//選項卡

showItem:function(n){

for(vari=0,len=this.liTabs.length;ilen;i++){

this.liTabs[i].className=tab

if(n==this.liTabs.length){

this.liTabs[0].className=tabcur

else{

this.liTabs[n].className=tabcur

startMove(this.oXSlide,{left:-n*this.li[0].offsetWidth});

moveLeft:function(){

this.iNow--;

if(this.iNow==-1){

this.oXSlide.style.left=-this.liTabs.length*this.li[0].offsetWidth+px

this.iNow=this.liTabs.length-1;

this.showItem(this.iNow);

moveRight:function(){

this.iNow++;

if(this.iNow==thi