在图片相册中复用性程序

最新推荐文章于 2024-07-18 23:53:35 发布

Munger6

最新推荐文章于 2024-07-18 23:53:35 发布

阅读量450

点赞数

分类专栏： JAVAScript 文章标签：时间休眠 javascript 事件创建函数

本文链接：https://blog.csdn.net/Munger6/article/details/53511468

版权

JAVAScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、将可以重复的程序做成一个方法进行传参调用

2、间隔时间重用方法，如何实现变化操作对象

3、在JS创建函数中如何设置传参；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main{
            width: 250px;
            height: 400px;
            position: relative;
            margin: 3% auto;
        }
        .picshow{
            width: 200px;
            height: 400px;
            position: absolute;
            background-color: orange;
            text-align: center;
        }
        .picshow p{
            font-size: 20px;
            font-family: Arial;
            margin: 10px;
        }
        .buts{
            width: 100px;
            height: 150px;
            position: absolute;
            left: 200px;
            top: 100px;
        }
        .buts ul{
            list-style: square  ;
            color: orange;

        }

    </style>
</head>
<body>
<div class="main">
    <div class="picshow">
        <p>1/4</p>
        <img src="image/1.jpg" style="width: 200px; ">
        <p>图片</p>
    </div>
    <div class="buts">
        <ul>
            <li class="li" onclick="oclick(0)"> </li>
            <li class="li" onclick="oclick(1)"> </li>
            <li class="li" onclick="oclick(2)"> </li>
            <li class="li" onclick="oclick(3)"> </li>
        </ul>
    </div>
</div>
<script>
    var opic = document.getElementsByClassName("picshow")[0];
    var op = opic.firstElementChild;
    var oimg = op.nextElementSibling;
    var oli = document.getElementsByClassName("li");
    var time
    var i = 0;
    time = setInterval(dynamic , 2000);
    function dynamic(){
        for(var j = oli.length-1 ; j >=0 ;j-- ){
            oli[j].style.color = "orange";
        }
        oli[i].style.color = "limegreen";
        op.innerHTML = (i+1)+"/4";
        oimg.src = "image/" + ( i + 1 ) + ".jpg";
        oimg.style.width = "200px"
        i++;
        if( i == oli.length ){
            i = 0;
        }
    }
    function oclick ( k ){
        clearInterval( time );
        i = k ;
        dynamic();
        time = setInterval(dynamic , 2000);
    }
</script>
</body>
</html>