One question per day _javascript. Using a pure JavaScript Dom core for a picture carousel effect?

Specific requirements:
1. Automatically from Samsara images every 2 seconds after page load
2. When the mouse hovers or clicks the small picture of the page, the big picture automatically follows the switch, and stops the carousel
3. When the mouse leaves the small picture, the picture restarts the carousel

Implementation ideas:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/87/D3/wKioL1fiksvCcOwiAAAxGbi3-jc146.png "title=" Flowchart. png "alt=" Wkiol1fiksvccowiaaaxgbi3-jc146.png "/>

Specific code:

html

<! doctype html>
   css  
body {    padding: 0;     margin: 2px 0 0 2px;} ul, li, p {    padding: 0;    margin: 0;} ul b {    float: left;    border: solid 2px  transparent;    }ul>li {    list-style: none;     float: left;} UL>LI>A>IMG&NBSP;{&NBSP;&NBSP;&NBSP;&NBSP;WIDTH:&NBSP;157PX;} ul>li>a>img:hover {    border-bottom: solid 5px  #eee;     -moz-box-sizing: border-box;    -webkit-box-sizing: border-box ;     box-sizing: border-box;} #img-display {    border: solid 1px  #eee;     border-radius: 2px;} 
 js  
 
  Description:  Add function to post-load event queue Function addonloadevent (func) {    var oldonload  = window.onload    if (typeof window.onload ==  ' function ') {         window.onload = function () {             oldonload ()              func ()         }    }else{         window.onload = func    }}//  Description:   Mouse hover Change picture function switchpic (link) {    if (!document.getelementbyid (' Img-display ') )  return true    var imgdisplay = document.getelementbyid (' Img-display ')     var href = link.getattribute (' href ')      imgdisplay.setattribute (' src ',  href)     return false}//  Description: Bind all link hover events to switchpicfunction  Prepareswitch () {    if (!document.getelementbyid)  return false     if (!document.getelementsbytagname)  return false    if (! document.getElementById (' ul-images '))  return false    var ulimages =  document.getelementbyid (' ul-images ')     var links =  Ulimages.getelementsbytagname (' a ')     var switchLinks = []     for (var i=0; i<links.length;i++) {         Switchlinks.push (Links[i])     }    //  start the intermittent task after page load, get the task id     var taskid = null    taskid = setinterval ( function () {&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;VAR&NBSP;IMGDIsplay = document.getelementbyid (' Img-display ')         var  link = switchlinks.shift ()         var href =  link.getattribute (' href ')         imgdisplay.setattribute (' src '), &NBSP;HREF)         switchlinks.push (link)     },  2000)     for (var i=0; i<links.length; i++) {         //  hover over or click Close all intermittent tasks         links[i]. Onmouseover = function () {            if ( TaskID)  clearinterval (taskid)              Return switchpic (This)         }         links[i].onclick = links[i].onmouseover        //  Leave the mouse to restart the intermittent task and generate a new task id        links[i].onmouseleave =  function () {            taskid =  SetInterval (function () {                 var imgdisplay = document.getelementbyid (' Img-display ')                  var link =  Switchlinks.shift ()                  var href = link.getattribute (' href ')                  imgdisplay.setattribute (' src ',  href)                &nbSp; switchlinks.push (link)             },  3000)             return false         }    }}addonloadevent (PrepareSwitch)

There are pictures like:
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/87/D7/wKiom1filE2zz-4ZAARNPzXxsu8104.png "title=" Carousel. png "alt=" Wkiom1file2zz-4zaarnpzxxsu8104.png "/>
This article is from the "ζ Automated operation and maintenance development Road ζ" blog, please be sure to keep this source http://xmdevops.blog.51cto.com/11144840/1855189
One question per day _javascript. Using a pure JavaScript Dom core for a picture carousel effect?