首页 > Web开发 > 详细

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

时间:2018-06-04 13:45:03      阅读:343      评论:0      收藏:0      [点我收藏+]

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完成首页轮播图效果

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!