图片轮播系列1-旋转木马(使用JS原生数组方式实现)

最新推荐文章于 2024-09-14 18:52:56 发布

stevenITBoy

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript 文章标签：图片轮播旋转木马 javascript 原生数组

本文链接：https://blog.csdn.net/stevenITBoy/article/details/52346707

版权

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

图片轮播系列1-旋转木马

——使用JS原生数组方式实现

今天分享的是图片轮播，这是一个系列，后续会更新。使用JS原生数组方式实现的比较简单的图片轮播。

效果展示：

步骤：

1、准备数据(图片)

2、使用工具： IDE是WebStorm

3、代码如下：




    
     
     
    
    
    <script>
        //文档加载完毕后
        window.οnlοad= function () {
            //获取向上按钮a标签
            var oPrev=document.getElementById("prev");
            //获取向下按钮a标签
            var oNext=document.getElementById("next");
            //获取span标签
            var oSpan=document.getElementById("span");
            //获取img标签
            var oImg=document.getElementById("img");
            //img标签的src属性的值设置为一个数组
            var arrUrl=["images/威尼斯1.jpg","images/威尼斯2.jpg","images/斯特丹1.jpg","images/斯特丹2.jpg"];

            //创建一个数为0,数组的下标从0开始
            var num=0;
            //初始化
            function oTab(){
                //显示第一张图片
                oImg.src=arrUrl[num];
                //动态显示 oSpan.innerHTML="1/4";
                oSpan.innerHTML=num+1+"/"+arrUrl.length;
            }
            
            //初始化调用
            oTab();

            //向上的点击事件
            oNext.οnclick= function () {
                num++;
                if(num
     
     
      
      =0){
//                    oImg.src=arrUrl[num];
//                    oSpan.innerHTML=num+1+"/"+arrUrl.length;
                    oTab();
                }
            };
        };
    </script>


    
      
      
        
       
       <
        
       
       >