这个 相当于一个小框架,拿来就可以用:
1. 功能:
如上图显示: 点击左右两个button,可以实现图片向左右滚动,也可以设置在多少秒自己滚动。
2. 首先建立一个js文件,文件名为play.js(只要和html中的引入相同就可以了):
var sina = { $: function(objname) { if (document.getelementbyid) { return eval('document.getelementbyid(' + objname + ')') } else { return eval('document.all.' + objname) } }, isie: navigator.appversion.indexof(msie) != -1 ? true : false, addevent: function(l, i, i) { if (l.attachevent) { l.attachevent(on + i, i) } else { l.addeventlistener(i, i, false) } }, delevent: function(l, i, i) { if (l.detachevent) { l.detachevent(on + i, i) } else { l.removeeventlistener(i, i, false) } }, readcookie: function(o) { var o = , l = o + =; if (document.cookie.length > 0) { var i = document.cookie.indexof(l); if (i != -1) { i += l.length; var i = document.cookie.indexof(;, i); if (i == -1) i = document.cookie.length; o = unescape(document.cookie.substring(i, i)) } }; return o }, writecookie: function(i, l, o, c) { var o = , i = ; if (o != null) { o = new date((new date).gettime() + o * 3600000); o = ; expires= + o.togmtstring() }; if (c != null) { i = ;domain= + c }; document.cookie = i + = + escape(l) + o + i }, readstyle: function(i, l) { if (i.style[l]) { return i.style[l] } else if (i.rentstyle) { return i.currentstyle[l] } else if (document.defaultview && document.defaultview.getcomputedstyle) { var i = document.defaultview.getcomputedstyle(i, null); return i.getpropertyvalue(l) } else { return null } }};function 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 = true; this.autoplaytime = 5; var _autotimeobj, _scrolltimeobj, _state = ready; this.stripdiv = document.createelement(div); this.listdiv01 = document.createelement(div); this.listdiv02 = document.createelement(div); if (!scrollpic.childs) { scrollpic.childs = [] }; this.id = scrollpic.childs.length; scrollpic.childs.push(this); this.initialize = function() { if (!this.scrollcontid) { throw new error(必须指定scrollcontid.); return }; this.scrollcontdiv = sina.$(this.scrollcontid); if (!this.scrollcontdiv) { throw new error(scrollcontid不是正确的对象.(scrollcontid = \ + this.scrollcontid + \)); return }; this.scrollcontdiv.style.width = this.framewidth + px; this.scrollcontdiv.style.overflow = hidden; this.listdiv01.innerhtml = this.listdiv02.innerhtml = this.scrollcontdiv.innerhtml; this.scrollcontdiv.innerhtml = ; this.scrollcontdiv.appendchild(this.stripdiv); this.stripdiv.appendchild(this.listdiv01); this.stripdiv.appendchild(this.listdiv02); this.stripdiv.style.overflow = hidden; this.stripdiv.style.zoom = 1; this.stripdiv.style.width = 32766px; this.listdiv01.style.cssfloat = left; this.listdiv02.style.cssfloat = left; sina.addevent(this.scrollcontdiv, mouseover, function(scrollpic.childs[ + this.id + ].stop())); sina.addevent(this.scrollcontdiv, mouseout, function(scrollpic.childs[ + this.id + ].play())); if (this.arrleftid) { this.arrleftobj = sina.$(this.arrleftid); if (this.arrleftobj) { sina.addevent(this.arrleftobj, mousedown, function(scrollpic.childs[ + this.id + ].rightmousedown())); sina.addevent(this.arrleftobj, mouseup, function(scrollpic.childs[ + this.id + ].rightend())); sina.addevent(this.arrleftobj, mouseout, function(scrollpic.childs[ + this.id + ].rightend())) } }; if (this.arrrightid) { this.arrrightobj = sina.$(this.arrrightid); if (this.arrrightobj) { sina.addevent(this.arrrightobj, mousedown, function(scrollpic.childs[ + this.id + ].leftmousedown())); sina.addevent(this.arrrightobj, mouseup, function(scrollpic.childs[ + this.id + ].leftend())); sina.addevent(this.arrrightobj, mouseout, function(scrollpic.childs[ + this.id + ].leftend())) } }; if (this.dotlistid) { this.dotlistobj = sina.$(this.dotlistid); if (this.dotlistobj) { var pages = math.round(this.listdiv01.offsetwidth / this.framewidth + 0.4), i, tempobj; for (i = 0; i = this.listdiv01.scrollwidth) { this.scrollcontdiv.scrollleft = this.scrollcontdiv.scrollleft + this.space - this.listdiv01.scrollwidth } else { this.scrollcontdiv.scrollleft += this.space }; this.accountpageindex() }; this.moveright = function() { if (this.scrollcontdiv.scrollleft - this.space this.space) { thismove = this.space }; if (thismove 0) { if (this.scrollcontdiv.scrollleft + thismove >= this.listdiv01.scrollwidth) { this.scrollcontdiv.scrollleft = this.scrollcontdiv.scrollleft + thismove - this.listdiv01.scrollwidth } else { this.scrollcontdiv.scrollleft += thismove } } else { if (this.scrollcontdiv.scrollleft - thismove math.round(this.listdiv01.offsetwidth / this.framewidth + 0.4) - 1) { this.pageindex = 0 }; var i; for (i = 0; i < this.dotobjarr.length; i++) { if (i == this.pageindex) { this.dotobjarr[i].classname = this.dotclassname } else { this.dotobjarr[i].classname = this.dotonclassname } } }};
3. 建立一个html文件:
实现滚动轮播的效果
bi系统1
bi系统2
bi系统3
bi系统4
bi系统5
bi系统6
bi系统7
其中:样式自己调试,最主要的是最下面的script,设置好这些就能达到效果了。
下次要写的轮播的话,只要改变样式就可以了,对于script中的一些数据进行改变就可以了。
以上所述就是本文的全部内容了,希望大家能够喜欢。