一.需求分析

在首页完成对轮播图的效果实现,完成自动切换图片的功能。

二.技术分析

  • 获取元素 document.getElementById(“id 名称”)
  • 事件(onload)
  • 定时操作： setInterval(“changeImg()”,3000);
1.setInterval定时器

三.代码实现

1.切换图片.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>切换图片</title>

        <style>

            div{

                border: 1px solid white;

                width:500px ;

                height: 350px;

                margin: auto;

                text-align: center;

            }

        </style>

        <script>

            var i=1;

            function changeImg(){

                i++;

                document.getElementById("img1").src="../../img/"+i+".jpg";

                if(i==3){

                    i=0;

                }

            }

        </script>

    </head>

    <body>

        <div>

            <input type="button" value="下一张" onclick="changeImg()"/>

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

        </div>

    </body>

</html>


2.轮播图.html




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>轮播图</title>

        <style>

            #father{

                border: 0px solid red;

                width: 1300px;

                height: 2170px;

                margin: auto;

            }

        </style>

        <script>

            function init(){

                //书写轮图片显示的定时操作

                setInterval("changeImg()",3000);

            }

            //书写函数

            var i=0

            function changeImg(){

                i++;

                //获取图片位置并设置src属性值

                document.getElementById("img1").src="../img/"+i+".jpg";

                if(i==3){

                    i=0;

                }

            }

        </script>

    </head>

    <body onload="init()">

        <div id="father">

            <!--轮播图部分-->

            <div id="">

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

            </div>

        </div>

    </body>

</html>




												


											
javaScript实现轮播图的更多相关文章
	

    
						
  1. JavaScript焦点轮播图
		
    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
    
		
    2. 
						
  2. HTML+CSS+Javascript实现轮播图效果
		
    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
    
		
    3. 
						
  3. 原生javascript焦点轮播图
		
    刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...
    
		
    4. 
						
  4. JavaScript实现轮播图效果
		
    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
    
		
    5. 
						
  5. 【JavaScript】轮播图
		
    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
    
		
    6. 
						
  6. JavaScript 自适应轮播图
		
    代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta  ...
    
		
    7. 
						
  7. javascript简单轮播图
		
    **轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片.其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果.** HTML布局和内容: 1.容器c ...
    
		
    8. 
								
  8. 原生JavaScript实现轮播图
		
    ---恢复内容开始--- 实现原理 通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果 HTML: <!DOCTYPE html> <html> &l ...
    
		
    9. 
						
  9. JavaScript之轮播图
		
    (1)html <div class="box" id="box"> <ul class="uls" id="u ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【LeetCode】029. Divide Two Integers
			
    Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...
    
			
    2. 
						
  2. Unity 5 官方打包管理工具 Asset Bundle Manager
			
    http://blog.csdn.net/suifcd/article/details/51570003 Unity5在Asset bundle 打包管理上采用了全新的方式,不需要再对每个文件进行MD ...
    
			
    3. 
						
  3. 用javascript实现base64编码器以及图片的base64编码
			
    前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...
    
			
    4. 
						
  4. Operating System-进程间互斥的问题-生产者&&消费者引入
			
    之前介绍的几种解决进程间互斥的方案,不管是Peterson方案还是TSL指令的方式,都有一个特点:当一个进程被Block到临界区外面时,被Block的进程会一直处于忙等待的状态,这个不但浪费了CPU资 ...
    
			
    5. 
						
  5. Python 设计一个简单的计算器
			
    设计目标 实现加减乘除及拓号优先级解析 用户输入'1 - 2 * ( (6-3 +(-5/5)*(9-2*3/3 + 7/3*7/4*12 +10 * 5/5 )) - (-4*3)/ (12-3*2 ...
    
			
    6. 
						
  6. Oracle RMAN 学习
			
    Oracle RMAN 学习:三思笔记 1 进入rman Rman--物理备份(结构/数据) 1 本地db Cmd set oracle_sid=orcl 1 rman target / Rman&g ...
    
			
    7. 
						
  7. 环形缓冲区的应用ringbuffer
			
    在嵌入式开发中离不开设备通信,而在通信中稳定性最高的莫过于环形缓冲区算法, 当读取速度大于写入速度时,在环形缓冲区的支持下不会丢掉任何一个字节(硬件问题除外). 在通信程序中,经常使用环形缓冲区作为数 ...
    
			
    8. 
						
  8. iOS消息转发机制
			
    iOS消息转发机制 “消息派发系统”(message-dispatch system) 若想令类能够理解某条消息,我们必须实现出对应的方法才行.但是,在编译器向类发送其无法解读的消息时并不会报错,因为 ...
    
			
    9. 
						
  9. oracle --(一)数据块（data Block）
			
    基本关系:数据库---表空间---数据段---分区---数据块 数据块(data Block)一.数据块Block是Oracle存储数据信息的最小单位.这里说的是Oracle环境下的最小单位.Orac ...
    
			
    10. 
						
  10. PHP通过加锁实现并发情况下抢码功能
			
    本文基于php语言使用加锁实现并发情况下抢码功能,特定时间段开放抢码并不允许开放的码重复: 需求:抢码功能 要求: 1.特定时间段才开放抢码: 2.每个时间段放开的码是有限的: 3.每个码不允许重复: ...
    
			
    11.