第一阶段：前端开发_使用JS完成首页轮播图效果

最新推荐文章于 2021-07-21 11:50:54 发布

ams90203

最新推荐文章于 2021-07-21 11:50:54 发布

阅读量126

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/sunNoI/p/9132660.html

版权

2018-06-04

使用JS完成首页轮播图效果

一、技术分析

　　获取元素： document.getElementById(“id 名称”)

　　事件(onload) ：页面加载事件

　　定时操作：setInterval(“changeImg()”,3000);

二、步骤分析

　　第一步：确定事件(onload)并为其绑定一个函数

　第二步：书写绑定的这个函数

　第三步：书写定时任务(setInterval)

　第四步：书写定时任务里面的函数

　第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性) [在循环的时候需要注意到了最后一张图片的时候要重置。]

三、代码实现
　　JS 代码：

<script>  
    function init(){ 
    //书写轮图片显示的定时操作 
      setInterval("changeImg()",3000);  
    }    //书写函数 
     var i=0；
    function changeImg(){  
     i++;   //获取图片位置并设置src属性值 
 
 document.getElementById("img1").src="../img/small0"+i+".jpg";
    if(i==3){
        i=0;  
     } 
   } 
</script>

HTML代码：

<body onload="init()">

在指定位置定义 id。

转载于:https://www.cnblogs.com/sunNoI/p/9132660.html

ams90203

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一阶段：前端开发_使用JS完成首页轮播图效果

2018-06-04使用JS完成首页轮播图效果一、技术分析　　获取元素： document.getElementById(“id 名称”) 　　事件(onload) ：页面加载事件　　定时操作：setInterval(“changeImg()”,3000);二、步骤分析　　第一步：确定事件(onload)并为其绑定一个函数　第二步：书...
复制链接

扫一扫