每日一题_JavaScript.利用纯JavaScript Dom Core实现图片轮播效果?

具体需求:
1. 页面加载后每隔2秒自动从轮播图片
2. 鼠标悬停或是点击页面中小图片时,大图片自动跟随切换,并且停止轮播
3. 鼠标离开小图片时,图片重新开始轮播

实现思路:

具体代码:

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 {
    width: 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

// 说明: 添加函数到加载后事件队列
function addOnLoadEvent(func){
    var oldOnLoad = window.onload
    if(typeof window.onload == 'function'){
        window.onload = function(){
            oldOnLoad()
            func()
        }
    }else{
        window.onload = func
    }
}
// 说明: 鼠标悬停改变图片
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
}
// 说明:绑定所有链接悬停事件到switchPic
function prepareSwitch(){
    if(!document.getElementById) return false
    if(!document.getElementsByTagName) return false
    if(!document.getElementById('ul-p_w_picpaths')) return false
    var ulImages = document.getElementById('ul-p_w_picpaths')
    var links = ulImages.getElementsByTagName('a')
    var switchLinks = []
    for(var i=0; i 
  

 
  
有图有像: