JS 控制图片在浏览器上幻灯片式自动播放

最新推荐文章于 2020-09-30 11:23:05 发布

没有风雨怎能远方

最新推荐文章于 2020-09-30 11:23:05 发布

阅读量2.3k

点赞数

分类专栏： WEB前端文章标签： html javascript 浏览器自动播放

本文链接：https://blog.csdn.net/yyf0409/article/details/76178013

版权

WEB前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浏览图片</title>
    <!-- 样式-->
    <style>
        *{
            margin:0px;
            padding: 0px;
        }
        .ct{
            margin: 0 auto;
            width: 500px;
        }
        .pic{
            height: 500px;
        }
        .an{
            width: 180px;
        }
    </style>
    <!-- script-->
    <script>
        var  dq =1;
        function shangyiye(){
            dq--;
            var xyy = document.getElementById('xyy')
             xyy.removeAttribute('disabled');
            if(dq ==1){
                var syy = document.getElementById('syy')
                syy.setAttribute('disabled','disabled');
            }
            var newImgSrc = "img/"+dq+".jpg";
            //获取img节点
            var tp = document.getElementById("tp");
            //修改tp节点的属性
            tp.setAttribute("src",newImgSrc);
        }
        function xiayiye(){
            dq++;
            var syy =  document.getElementById('syy');
            syy.removeAttribute('disabled');
            if(dq == 14)
            {
                var xyy =  document.getElementById('xyy');
                xyy.setAttribute('disabled','disabled');
            }
            var newImgSrc = "img/"+dq+".jpg";
            //获取img节点
            var tp = document.getElementById("tp");
            //修改tp节点的属性
            tp.setAttribute("src",newImgSrc);
        }
        var flag = false;
        function zd(){
            var text = document.getElementById('zd').innerHTML;
            if(text == '自动播放')
            {
                document.getElementById('zd').innerHTML='停止';
                flag = true;
                zdfy();
            }
            else  if(text == '停止')
            {
                document.getElementById('zd').innerHTML='自动播放';
                flag = false;
            }

        }
        function zdfy(){

            if(dq==14)
            {
                dq= 0;
            }
            xiayiye();
            if(flag)
            {
                setTimeout('zdfy()',2000);
            }
        }
    </script>
</head>
<body>
<div id="d1" class="ct pic">
    <img id="tp" width="500px" height="500px" src="../7_21 js/img/1.jpg" alt=""/></div>
<div id="d2" class="ct bt">
    <div class="ct an">
        <button disabled="disabled"  id="syy" οnclick="shangyiye()">上一页</button>
        <button id="zd" οnclick="zd()">自动播放</button>
        <button id="xyy" οnclick="xiayiye()">下一页</button>
    </div>
   </div>
<!--音频标签-->
<audio src="3.mp3" controls="controls" loop="-1" autoplay="autoplay" hidden="hidden">

</audio>

</body>
</html>