js implémente un simple clic sur la lecture en boucle d'image-js tutoriel-php.cn

js implémente un simple clic sur la lecture en boucle d'image

不言

Libérer： 2018-07-05 17:38:11

original

2127 Les gens l'ont consulté

Cet article présente principalement l'implémentation js de la lecture simple en boucle d'images en un clic. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Cliquez simplement. pour cliquer sur la lecture en boucle de l'image Lecture :

<!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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction aux getters et setters en JavaScript

Utiliser jQuery pour implémenter une simple grille de neuf carrés la loterie

js permet l'édition en cliquant sur le bouton

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!