Home >Web Front-end >JS Tutorial >js implements simple click on picture loop playback

js implements simple click on picture loop playback

不言Original: 2018-07-05 17:38:112122browse

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>

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!

php JavaScript jquery 循环 JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use ECharts to load data asynchronously in the mini programNext article：Use ECharts to load data asynchronously in the mini program

See more

js implements simple click on picture loop playback

Related articles