码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-06-04 14:35:36      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:hang   doc   ntb   代码实现   htm   interval   int   变量   inter   

2018-06-04

 

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

 

一、技术分析

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

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

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

 

二、步骤分析

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

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

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

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

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

三、代码实现
  JS 代码:

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

 

HTML代码:

<body onload="init()"> 

在指定位置定义 id。 



 

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

标签:hang   doc   ntb   代码实现   htm   interval   int   变量   inter   

原文地址:https://www.cnblogs.com/sunNoI/p/9132660.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!