用js实现简易的图片播放

最新推荐文章于 2019-06-25 21:32:19 发布

@全栈小白

最新推荐文章于 2019-06-25 21:32:19 发布

阅读量827

点赞数

分类专栏：学习资料文章标签： js特效

本文链接：https://blog.csdn.net/kuaixiangzi/article/details/44814851

版权

学习资料专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用js实现简易的图片播放

用js做图片轮播，其实也就是触发事件后，切换图片的src属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS图片播放</title>
</head>
<body>
<div id="wrap">
    <div id="slider">
        <a target="_blank" href="#"><img src="images/1.png" /></a>
        <a target="_blank" href="#"><img id="second" /></a>
        <a target="_blank" href="#"><img id="third" /></a>
        <a target="_blank" href="#"><img id="four" /></a>
    </div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type="text/javascript">
    window.onload = function () {
        flag = 0;
        obj1 = document.getElementById("slider");
        obj2 = document.getElementsByTagName("li");
        obj2[0].style.backgroundColor = "#666666";
        time = setInterval("turn();", 5000);
        obj1.onmouseover = function () {
            clearInterval(time);
        }
        obj1.onmouseout = function () {
            time = setInterval("turn();", 6000);
        }
        for (var num = 0; num < obj2.length; num++) {
            obj2[num].onmouseover = function () {
                turn(this.innerHTML);
                clearInterval(time);
            }
            obj2[num].onmouseout = function () {
                time = setInterval("turn();", 6000);
            }
        }
            //延迟加载图片，演示的时候，使用本地图片
            // 上线后请改为二级域名提供的图片地址
            document.getElementById("second").src = "images/2.png";
               //使用图片宽660，高550
           document.getElementById("third").src = "images/3.png";
        document.getElementById("four").src = "images/4.png";
    }
    function turn(value) {
        if (value != null) {
            flag = value - 2;
        }
        if (flag < obj2.length - 1)
            flag++;     else     flag = 0;
        obj1.style.top = flag * (-550) + "px";
        for (var j = 0; j < obj2.length; j++) {
            obj2[j].style.backgroundColor = "#ffffff";
        }
        obj2[flag].style.backgroundColor = "#666666";
    }
</script>
</body>
</html>