JS implementation of the picture click around the _javascript skills of the carousel

This is the equivalent of a small frame, can be used to get it:

1. Function:

As shown in the figure above: Click the left and right two button, you can achieve the picture to scroll around, you can set the number of seconds to scroll themselves.

2. First set up a JS file, file name Play.js (as long as the introduction of HTML and the same can be):

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 = ";d omain=" + C}; Document.cookie = i + "=" + Escape (L) + O + i}, readstyle:function (i, L) {if (i.style[l)) {return i.styl E[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)} or 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 ("must specify Scrollcontid.");
    return};
    This.scrollcontdiv = sina.$ (This.scrollcontid); if (!this.scrollcontdiv) {throw new Error ("Scrollcontid is not the correct object."
      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 + "].rig")
        Htmousedown ()));
        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 + "].L")
        Eftmousedown ()));
        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, TE
        Mpobj;
          for (i = 0; i < pages; i++) {tempobj = Document.createelement ("span");
          This.dotListObj.appendChild (Tempobj);
          This.dotObjArr.push (Tempobj); if (i = = This.pageindex) {tempobj.classname = This.dotclassname} else {TEMPOBJ.CLASSN
  ame = This.dotonclassname};        Tempobj.title = "First" + (i + 1) + "page";
    Sina.addevent (Tempobj, "click", Function ("scrollpic.childs[" + this.id + "].pageto (" + i + "))}};
  if (this.autoplay) {This.play ()}};
    This.leftmousedown = function () {if (_state!= "ready") {return};
    _state = "floating";
  _scrolltimeobj = SetInterval ("scrollpic.childs[" + this.id + "].moveleft ()", This.speed)};
    This.rightmousedown = function () {if (_state!= "ready") {return};
    _state = "floating";
  _scrolltimeobj = SetInterval ("scrollpic.childs[" + this.id + "].moveright ()", This.speed)};
      This.moveleft = function () {if (This.scrollContDiv.scrollLeft + this.space >= 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 <= 0) {this.scrollContDiv.scrollLeft = THIS.LISTD Iv01.scrollwidth + this.scrollcontdiv.scrollleft-this.space} else {this.scrollContDiv.scrollLeft-= This.spa
    CE};
  This.accountpageindex ()};
    This.leftend = function () {if (_state!= "floating") {return};
    _state = "stoping";
    Clearinterval (_scrolltimeobj);
    var fill = this.pagewidth-this.scrollcontdiv.scrollleft% This.pagewidth;
  This.move (fill)};
    This.rightend = function () {if (_state!= "floating") {return};
    _state = "stoping";
    Clearinterval (_scrolltimeobj);
    var fill =-this.scrollcontdiv.scrollleft% This.pagewidth;
  This.move (fill)};
    This.move = function (num, quick) {var thismove = NUM/5;
      if (!quick) {if (Thismove > This.space) {thismove = this.space}; if (Thismove <-this.space) {Thismove =-this.space}}; if (Math.Abs (Thismove) < 1 && thismove!= 0) {thismove = Thismove >= 0? 1:-1} else {th
    Ismove = Math.Round (Thismove)};
    var temp = this.scrollContDiv.scrollLeft + thismove; if (Thismove > 0) {if (This.scrollContDiv.scrollLeft + thismove >= this.listDiv01.scrollWidth) {This . Scrollcontdiv.scrollleft = This.scrollContDiv.scrollLeft + thismove-this.listdiv01.scrollwidth} else {T His.scrollContDiv.scrollLeft + = Thismove}} else {if (this.scrollcontdiv.scrollleft-thismove <= 0) {this.scrollContDiv.scrollLeft = This.listDiv01.scrollWidth + this.scrollcontdiv.scrollleft-thismove} el
    Se {this.scrollContDiv.scrollLeft + = Thismove}};
    num-= Thismove;
      if (math.abs (num) = = 0) {_state = "ready";
      if (this.autoplay) {this.play ()};
      This.accountpageindex (); return} else {This.acCountpageindex ();
  settimeout ("scrollpic.childs[" + this.id + "].move (" + num + "," + Quick + ")", This.speed)}};
    This.next = function () {if (_state!= "ready") {return};
    _state = "stoping";
  This.move (This.pagewidth, True)};
    This.play = function () {if (!this.autoplay) {return};
    Clearinterval (_autotimeobj);
  _autotimeobj = SetInterval ("scrollpic.childs[" + this.id + "].next ()", This.autoplaytime * 1000)};
  This.stop = function () {clearinterval (_autotimeobj)};
    This.pageto = function (num) {if (_state!= "ready") {return};
    _state = "stoping";
    var fill = num * this.framewidth-this.scrollcontdiv.scrollleft;
  This.move (Fill, true)};
    This.accountpageindex = function () {This.pageindex = Math.Round (this.scrollcontdiv.scrollleft/this.framewidth);
    if (This.pageindex > 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 = th

 Is.dotclassname} else {this.dotobjarr[i].classname = This.dotonclassname}}}};

3. Create an HTML file:

<!
    DOCTYPE html>  

Which: the style of their own debugging, the most important is the bottom of the script, set these can achieve results.

The next time you want to write a carousel, just change the style on it, for some of the data in the script can be changed.

The above mentioned is the entire content of this article, I hope you can enjoy.