首页 > 代码库 > 每日一题_JavaScript.利用纯JavaScript Dom Core实现一个图片轮播效果 ?

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

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


实现思路:

技术分享


具体代码:

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Js实现图片轮播</title>
        <link rel="stylesheet" href="http://www.mamicode.com/css/layout.css" />
    </head>
    <body>
        <img id="img-display" src="http://www.mamicode.com/img/1.jpg" />
        <ul id="ul-images">
            <li>
                <a href="http://www.mamicode.com/img/1.jpg">
                    <img src="http://www.mamicode.com/img/1.jpg"/>
                </a>
            </li>
            <b></b>
            <li>
                <a href="http://www.mamicode.com/img/2.jpg">
                    <img src="http://www.mamicode.com/img/2.jpg"/>
                </a>
            </li>
            <b></b>
            <li>
                <a href="http://www.mamicode.com/img/3.jpg">
                    <img src="http://www.mamicode.com/img/3.jpg"/>
                </a>
            </li>
            <b></b>
            <li>
                <a href="http://www.mamicode.com/img/4.jpg">
                    <img src="http://www.mamicode.com/img/4.jpg"/>
                </a>
            </li>
        </ul>
        <script type="text/javascript" src="http://www.mamicode.com/js/carousel.js"></script>
    </body>
</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-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])
    }
    // 页面加载后启动间歇任务,取得任务ID
    var taskid = null
    taskid = setInterval(function(){
        var imgDisplay = document.getElementById(‘img-display‘)
        var link = switchLinks.shift()
        var href = link.getAttribute(‘href‘)
        imgDisplay.setAttribute(‘src‘, href)
        switchLinks.push(link)
    }, 2000)
    for(var i=0; i<links.length; i++){
        // 鼠标悬停或单击关闭所有间歇任务
        links[i].onmouseover = function(){
            if(taskid) clearInterval(taskid)
            return switchPic(this)
        }
        links[i].onclick = links[i].onmouseover
        // 鼠标离开重新启动间歇任务并生成新的任务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)
                switchLinks.push(link)
            }, 3000)
            return false
        }
    }
}
addOnLoadEvent(prepareSwitch)


有图有像:

技术分享

本文出自 “ζ自动化运维开发之路ζ” 博客,请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1855189

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