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

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。 



 

posted @ 2018-06-04 12:00  sunNoI  阅读(569)  评论(0)  编辑  收藏  举报