js左键旋转木马

这相当于一个小框架，可以使用如下：

1。功能：
如上图所示：点击左右两个按钮，可以实现图片向左右滚动，也可以设置在多少秒钟内滚动。

2。首先，创建一个JS文件命名为play.js（只要是在HTML的介绍一样）：
var
$：功能（你）{
如果（文件。getElementById）{
返回eval（document.getelementbyid（+ +你））
{人}
返回eval（'document。所有。+你）
}
}，
IsIE：navigator.appversion.indexof（MSIE）！= 1真实：假，
AddEvent：功能（L，I，I）{
如果（l.attachevent）{
l.attachevent（+我，我）
{人}
L.addEventListener（我，我的错误）
}
}，
DelEvent：功能（L，I，I）{
如果（l.detachevent）{
l.detachevent（+我，我）
{人}
L.removeEventListener（我，我的错误）
}
}，
readcookie：功能（o）{
var
L = O；
如果（document.cookie.length > 0）{
var i = document.cookie.indexof（L）；
如果（i）！= 1）{
我= l.length；
var i = document.cookie.indexof（；
如果（我= = - 1）= document.cookie.length；
O = unescape（document.cookie.substring（I，I））
}
}；
回来啊
}，
writecookie：功能（I，L，O，C）{
var
=；
如果（o）！= NULL）{
O =新的日期（（新日期）。GetTime（）+ O * 3600000）；
O = ；到期=+ o.togmtstring（）
}；
如果（c）！= NULL）{
；；
}；
document.cookie =我+=+逃跑（L）+ O +我
}，
readstyle：功能（I，L）{
如果（i.style { L }）{
返回i.style {我}
如果（i.rentstyle）{ }
返回i.currentstyle {我}
} else if（document.defaultview文件。defaultview。getcomputedstyle）{
var i = document.defaultview.getcomputedstyle（我空）；
返回i.getpropertyvalue（L）
{人}
返回null
}
}
}；

函数的ScrollPic（scrollcontid，arrleftid，arrrightid，dotlistid）{
this.scrollcontid = scrollcontid；
this.arrleftid = arrleftid；
this.arrrightid = arrrightid；
this.dotlistid = dotlistid；
this.dotclassname =dotitem ；
this.dotonclassname =dotitemon ；
this.dotobjarr = { }；
this.pagewidth = 0；
this.framewidth = 0；
this.speed = 10；
This.space = 10;
this.pageindex = 0；
this.autoplay =真；
this.autoplaytime = 5；
无功_autotimeobj，_scrolltimeobj，_state =准备好了；
this.stripdiv = document.createelement（div）；
this.listdiv01 = document.createelement（div）；
this.listdiv02 = document.createelement（div）；
如果（！scrollpic。孩子）{
scrollpic.childs = { }
}；
scrollpic.childs.length this.id =；
ScrollPic.childs.push（本）；
this.initialize =函数（）{
如果（！这scrollcontid）{。
把新的错误（必须指定scrollcontid。）；
返回
}；
this.scrollcontdiv =新浪。（这scrollcontid美元。）；
如果（！这scrollcontdiv）{。
把新的错误（scrollcontid是不正确的对象。（scrollcontid = + this.scrollcontid + ））
返回
}；

this.scrollcontdiv.style.width = this.framewidth +PX；
this.scrollcontdiv.style.overflow =隐藏；
this.listdiv01.innerhtml = = this.scrollcontdiv.innerhtml this.listdiv02.innerhtml；
this.scrollcontdiv.innerhtml = ；
this.scrollcontdiv.appendchild（这个。stripdiv）；
this.stripdiv.appendchild（这个。listdiv01）；
this.stripdiv.appendchild（这个。listdiv02）；
this.stripdiv.style.overflow =隐藏；
this.stripdiv.style.zoom =1；
this.stripdiv.style.width =32766px ；
this.listdiv01.style.cssfloat =左；
this.listdiv02.style.cssfloat =左；
Sina.addEvent (this.scrollContDiv, mouseover
Sina.addEvent（this.scrollcontdiv，mouseout
如果（这。arrleftid）{
this.arrleftobj =新浪。（这arrleftid美元。）；
如果（这。arrleftobj）{
Sina.addEvent（this.arrleftobj MouseDown ，
Sina.addEvent（this.arrleftobj，MouseUp
Sina.addEvent（this.arrleftobj，mouseout
}
}；
如果（这。arrrightid）{
this.arrrightobj =新浪。（这arrrightid美元。）；
如果（这。arrrightobj）{
Sina.addEvent（this.arrrightobj MouseDown ，
Sina.addEvent（this.arrrightobj，MouseUp
Sina.addEvent（this.arrrightobj，mouseout
}
}；
如果（这。dotlistid）{
this.dotlistobj =新浪。（这dotlistid美元。）；
如果（这。dotlistobj）{
VaR页= math.round（this.listdiv01.offsetwidth / this.framewidth + 0.4），
我tempobj；
对于（i = 0；i <页；i + +）{
tempobj = document.createelement（跨越）；
this.dotlistobj.appendchild（tempobj）；
This.dotObjArr.push（tempobj）；
如果（我= =这个PageIndex）{
tempobj.classname = this.dotclassname
{人}
tempobj.classname = this.dotonclassname
}；
tempobj.title =第一+（i + 1）+页；
Sina.addEvent（tempobj，点击
}
}
}；
如果（这。自动播放）{
This.play（）
}
}；
this.leftmousedown =函数（）{
如果（_state！=就绪）{
返回
}；
_state =浮动；
_scrolltimeobj = setInterval（scrollpic。孩子{ this.id+ +}。向左移动（）
}；
this.rightmousedown =函数（）{
如果（_state！=就绪）{
返回
}；
_state =浮动；
_scrolltimeobj = setInterval（scrollpic。孩子{ this.id+ +}。向右移动（）
}；
this.moveleft =函数（）{
如果（this.scrollcontdiv.scrollleft + this.space > =这。listdiv01。scrollwidth）{
this.scrollcontdiv.scrollleft = this.scrollcontdiv.scrollleft + this.space - this.listdiv01.scrollwidth
{人}
this.scrollcontdiv.scrollleft = this.space
}；
this.accountpageindex（）
}；
this.moveright =函数（）{
如果（this.scrollcontdiv.scrollleft this.space <= 0）{
this.scrollcontdiv.scrollleft = this.listdiv01.scrollwidth + this.scrollcontdiv.scrollleft - this.space
{人}
this.scrollcontdiv.scrollleft = this.space
}；
this.accountpageindex（）
}；
this.leftend =函数（）{
如果（_state！=浮动）{
返回
}；
_state =采矿；
ClearInterval（_scrolltimeobj）；
无功补= this.pagewidth这。scrollcontdiv this.pagewidth scrollLeft %；
This.move（补）
}；
this.rightend =函数（）{
如果（_state！=浮动）{
返回
}；
_state =采矿；
ClearInterval（_scrolltimeobj）；
无功补= -这。scrollcontdiv this.pagewidth scrollLeft %；
This.move（补）
}；
this.move =功能（num，快）{
无功thismove =民 / 5；
如果（！快）{
如果（thismove >）
这个空格）{
thismove = this.space
}；
如果（thismove <-这。空间）{
thismove = -this.space
}
}；
如果（Math.abs（thismove）＜1 thismove！= 0）{
thismove = thismove > = 01：1
{人}
thismove = math.round（thismove）
}；
VaR的温度= this.scrollcontdiv.scrollleft + thismove；
如果（thismove > 0）{
如果（this.scrollcontdiv.scrollleft + thismove > =这。listdiv01。scrollwidth）{
this.scrollcontdiv.scrollleft = this.scrollcontdiv.scrollleft + thismove - this.listdiv01.scrollwidth
{人}
this.scrollcontdiv.scrollleft = thismove
}
{人}
如果（this.scrollcontdiv.scrollleft thismove <= 0）{
this.scrollcontdiv.scrollleft = this.listdiv01.scrollwidth + this.scrollcontdiv.scrollleft - thismove
{人}
this.scrollcontdiv.scrollleft = thismove
}
}；
Num = thismove；
如果（Math.abs（努姆）= = 0）{
_state =准备好了；
如果（这。自动播放）{
This.play（）
}；
this.accountpageindex（）；
返回
{人}
this.accountpageindex（）；
setTimeout（scrollpic。孩子{ this.id+ +}。移动（+数字+
}
}；
this.next =函数（）{
如果（_state！=就绪）{
返回
}；
_state =采矿；
This.move（this.pagewidth，真的）
}；
this.play =函数（）{
如果（！这个自动播放）{
返回
}；
ClearInterval（_autotimeobj）；
_autotimeobj = setInterval（scrollpic。孩子{ this.id+ +}。二（）
}；
this.stop =函数（）{
ClearInterval（_autotimeobj）
}；
this.pageto =功能（NUM）{
如果（_state！=就绪）{
返回
}；
_state =采矿；
无功补=数量* this.framewidth - this.scrollcontdiv.scrollleft；
This.move（填充，真的）
}；
this.accountpageindex =函数（）{
this.pageindex = math.round（this.scrollcontdiv.scrollleft /本。frameWidth）；
如果（this.pageindex > math.round（this.listdiv01.offsetwidth / this.framewidth + 0.4）- 1）{
this.pageindex = 0
}；
var i；
为（i = 0；i < this.dotobjarr.length；i++）{
如果（我= =这个PageIndex）{
这个dotobjarr {我} this.dotclassname classname =。
{人}
这个dotobjarr {我} this.dotonclassname classname =。
}
}
}
}；

三.建立一个HTML文件：

滚动轮播效果

{。资产净值
宽度：1100px；
身高：160px；
/ *边框1px solid *红；
左：140px保证金；
职位：相对；
光标：指针；
边距：15px；
溢出：隐藏；
border: 1px solid红
}
资产净值{ #导航所有。
宽度：自动；
身高：160px；
位置：绝对；
左：- 30px；
}
nav.nav-i {。
宽度：194px；
身高：158px；
背景：# FFF；
边境：1px solid # d8d8d8；
浮点数：左；
左：30px保证金；
}
nav.nav-img {。
文本对齐：中心；
50px垫上；
}
nav.nav-name {。
宽度：192px；
身高：30px；
背景：# f2f2f2；
边距：33px；
行高：30px；
}
nav.nav-name一{。
字体大小：16px；
微软雅黑字体家庭：'；
左：10px填充；
光标：指针；
}
nav.nav-name {：悬停。
颜色：# 4a7abe；
}
{ #最后
位置：绝对；
左：0；
上图：50px；
}
{ #下
位置：绝对；
权利：0；
上图：50px；
}
{最后一个
/ *显示：*无；

光标：指针；
}


BI系统1

BI系统2

BI系统3

BI系统4

BI系统5

BI系统6

BI系统7


无功scrollpic_02 =新scrollpic（）；
scrollpic_02.scrollcontid =导航； / /存储的所有元素div的旋转木马
scrollpic_02.arrleftid =上； / /左箭头标识
scrollpic_02.arrrightid =下一个； / / ID右箭头
scrollpic_02.framewidth = 1102； / /显示框的宽度sfdasdfakfl；jlkajka；D
scrollpic_02.pagewidth = 226； / /页面宽度
ScrollPic_02.speed = 10; / / movement speed (MS, smaller and faster)
scrollpic_02.space = 20； / /每次移动的像素（单位像素，更大、更快）
scrollpic_02.autoplay = true； / /自动播放：真正的|假
scrollpic_02.autoplaytime = 2； / /自动播放的时间间隔（秒）
（scrollpic_02。初始化）； / /初始化

其中：自己调试的风格，最重要的是底层的脚本，设置这些可以达到效果。

下一次您想编写旋转木马时，尽可能地更改样式，因为脚本中的一些数据已更改。

以上是本文的全部内容，希望大家能喜欢。