zoukankan      html  css  js  c++  java
  • 使用javascript实现图片轮播效果

    使用javascript实现图片轮播效果

    图片轮播效果是前端开发中比较常见的一个功能,现在我们来简单分析一下实现思路

    第一步:在html代码要实现轮播的html标签中添加id属性以便使用javascript时能快找到这个标签,例如:

    <img id="img1" src="../img/1.jpg" width="100%">

    第二步:分析图片轮播效果是什么事件,据分析,应该是onload事件

    第三部:编写函数

    var i = 1;
    
    function changeImg(){
            //获取图片的标签,然后改变标签的属性
            var img1 = document.getElementByIDd("img1");
             //i == 3,即实现3张图片的轮播
            if(i == 3)
            {
                i = 1;
            }else{
                i++;
            }
            img1.src = "../img/"+i+".jpg";
    }
    
    function init(){
            //设置定时,每过5秒执行一次changeImg函数
            setInterval("changeImg()",5000);
    }

    第四步:添加事件,例如:

    //body标签一经加载,函数即可运行
        <body onload="init()">
    
        </body>
  • 相关阅读:
    混合背包
    二维背包
    0/1背包问题(DP)
    冒泡排序
    快速排序
    最长上升子序列
    二分查找
    n后问题
    crontab 定时任务
    删除以某字符串开头的表
  • 原文地址:https://www.cnblogs.com/ithome0222/p/10688107.html
Copyright © 2011-2022 走看看