js implements simple click on picture loop playback-JS Tutorial-php.cn

js implements simple click on picture loop playback

不言

Release： 2018-07-05 17:38:11

Original

2112 people have browsed it

This article mainly introduces the js implementation of simple click picture loop playback, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

Simple click picture loop Play:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="imges/01.jpg" alt="" id=&#39;img&#39;>
    <button id=&#39;prev&#39;>上一张</button>
    <button id=&#39;next&#39;>下一张</button>
    
</body>
    <script>
        window.onload = function(){            //获取要用到的元素，标签

            var img = document.getElementById(&#39;img&#39;);            var prev = document.getElementById(&#39;prev&#39;);            var next = document.getElementById(&#39;next&#39;);            //定义两端的临界值， 定义活动的变量 最大5张、

            var maxIndex = 5;            var minIndex = 1;            var activeIndex = minIndex;            
            // 确定事件源  绑定事件函数。
            prev.onclick = function(){                //当点击 上一张的时候， img的src 实现切换
                img.src = &#39;imges/0&#39; + activeIndex + &#39;.jpg&#39;;                
                if(activeIndex === 1){
                    activeIndex = 5;
                }else{activeIndex --;}
            }

            next.onclick = function(){               
                if(activeIndex === 5){
                    activeIndex = 1;
                }else{
                    activeIndex++;
                }
                img.src = &#39;imges/0&#39; + activeIndex + &#39;.jpg&#39;;

            }

            

        }    
    
    </script>
</html>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to getters and setters in JavaScript

Using jQuery to implement a simple nine-square grid lottery

js realizes editing by clicking the button

The above is the detailed content of js implements simple click on picture loop playback. For more information, please follow other related articles on the PHP Chinese website!