一.需求分析

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

二.技术分析

  • 获取元素 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. js中的点击事件（click）的实现方式
			
    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
    
			
    2. 
						
  2. [Unity3D]关于U3D贴图格式压缩
			
    http://blog.sina.com.cn/s/blog_5b6cb9500102vi6i.html 因为有不少人都问过我压缩格式的问题,今天飞哥又重新提醒了一次.整理一下发个贴,以供大家查阅和讨 ...
    
			
    3. 
						
  3. 设置Qt应用程序图标及应用程序名 【转载】
			
    一直以来很纠结给qt应用程序添加图标问题,在网上收过一次,但是感觉不够完整,现将自己的实现过程记录下,以便以后查看: 通过网上的例子知道qt助手中有相关说明: Setting the Applicat ...
    
			
    4. 
						
  4. 3.Monkey Script小案例
			
    1.实现打开搜狗搜索APP,在搜索框输入内容,点击回车,重复2次运行 2.实现代码如下所示: type=user count=10 speed=1.0 start data >> Laun ...
    
			
    5. 
						
  5. JSF使用HTML5的custom attribute
			
    只需要在页面引用这样的命名空间: xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"之后,在JSF的控件的html5属性加上前缀&quo ...
    
			
    6. 
						
  6. install命令和cp命令的区别
			
    基本上,在Makefile里会用到install,其他地方会用cp命令. 它们完成同样的任务——拷贝文件,它们之间的区别主要如下: 1.最重要的一点,如果目标文件存在,cp会先清空文件后往里写入新文件 ...
    
			
    7. 
						
  7. eclipse项目中将普通文件夹转化成资源文件夹
			
    1.点选该文件夹 2.右键属性Properties 3.选择属性:Build Path 4.点选属性:Use as  Source Folder ......等待变成资源文件夹 参考更详细的: ecl ...
    
			
    8. 
						
  8. throw和throws的区别和联系
			
    突然发现今天诗兴大发,看来又得写点内容了. throw和throws对于Java程序员而言它们真的不是很陌生.但对于我这样的选手而言一提到它们的区别和联系就蒙圈了... 为了以后不蒙圈,今天就研究一下 ...
    
			
    9. 
						
  9. md5加密（2）
			
    package test1; import java.security.MessageDigest; public class MD5Test { //十六进制下数字到字符的映射数组 private  ...
    
			
    10. 
						
  10. sass实用知识点
			
    本文总结sass相关核心知识点 说明:本文的内容是,我在开发实践中总结的实用性比较强的sass知识点,其他未涉及的知识,如果对你有作用请自行查阅 sass知识目录 嵌套 注释 SassScript @ ...
    
			
    11.