recherche

Maison >interface Web >js tutoriel >js implémente un simple clic sur la lecture en boucle d'image

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

不言
不言original
2018-07-05 17:38:112154parcourir

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>

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!

php JavaScript jquery 循环 JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Utilisez ECharts pour charger des données de manière asynchrone dans le mini programmeArticle suivant：Utilisez ECharts pour charger des données de manière asynchrone dans le mini programme

Articles Liés

Voir plus