当前位置：网站首页>JS learning notes 16: switching pictures small project practice

JS learning notes 16: switching pictures small project practice

2022-07-25 19:20:00 【The man fished alone in the cold river snow】 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
    
            margin: 0;
            padding:0;
        }
        #outer{
    
            width: 380px;
            margin: 50px auto;
            padding: 10px;
            background-color: yellowgreen;
            /*  Center text  */
            text-align: center;
        }
    </style> <script> window.οnlοad=function(){
    
                // Click the button to switch between pictures 

                // Get two buttons 
                var prev=document.getElementById("prev");
                var next=document.getElementById("next");
                
                var img=document.getElementsByTagName("img")[0];

                
                // Create an array , The path to save the picture 
                var imgArr=["../../../ Picture material / JD.COM 1.jpg","../../../ Picture material / JD.COM 2.jpg","../../../ Picture material / JD.COM 3.jpg","../../../ Picture material /2.jpeg","../../../ Picture material /3.jpg"];
                
                // Set prompt text   obtain id by info Of p Elements 

                var info=document.getElementById("info");
                // Set prompt text 
                info.innerHTML=" altogether "+imgArr.length+" A picture , Current "+(index+1)+" Zhang ";

                // Create a variable , To save the index of the picture currently being displayed 
                var index=0;



                prev.οnclick=function(){
    
                    // Switch to the previous , Index self subtraction 
                    index--;

                    if (index<0){
    
                        index=0;
                    }
                    img.src=imgArr[index];
                    // When you click the button , Reset information 
                    info.innerHTML=" altogether "+imgArr.length+" A picture , Current "+(index+1)+" Zhang ";
                   
                }; next.οnclick=function(){
    
                    // Switching pictures is to modify img Of src attribute  // To modify the attributes of an element   Elements . attribute = Property value  if (index>imgArr.length-1){
    
                        index=0;
                    }
                    index++;
                    img.src=imgArr[index];
                };
            };

    </script>
</head>
<body>

    <div id="outer">
        <p id="info"></p>
        <img src="C:\Users\Administrator\Desktop\HTML\ Picture material \ JD.COM 1.jpg" alt=" JD.COM "><br>
        <button id="prev">< Previous  </button>
        <button id="next"> Next > </button>
    </div>

</body>
</html>
原网站

版权声明
本文为[The man fished alone in the cold river snow]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207191225568518.html

边栏推荐

猜你喜欢

随机推荐