一.需求分析

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

二.技术分析

  • 获取元素 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. 基于Python语言使用RabbitMQ消息队列（二）
			
    工作队列 在第一节我们写了程序来向命名队列发送和接收消息 .在本节我们会创建一个工作队列(Work Queue)用来在多个工人(worker)中分发时间消耗型任务(time-consuming tas ...
    
			
    2. 
						
  2. Inception-Resnet-V2
			
    零.Inception-Resnet-V2的网络模型 整体结构如下,整体设计简洁直观: 其中的stem部分网络结构如下,inception设计,并且conv也使用了7*1+1*7这种优化形式: inc ...
    
			
    3. 
						
  3. bzoj 3625(CF 438E)The Child and Binary Tree——多项式开方
			
    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3625 http://codeforces.com/contest/438/problem/E ...
    
			
    4. 
						
  4. web打印详解
			
    在B/S模式开发中,打印是个很大的困扰.无论是采用页面直接输出或者引用WORD.DLL也好,都有不足之处. 目前最好的办法就是采用第三方控件,网上流传的打印控件有很多.总结了下推荐几个给大家: 一.首 ...
    
			
    5. 
						
  5. Oracle RMAN 学习：恢复
			
    Oracle RMAN 学习:恢复 6 rman恢复 Rman中的恢复对应restore,recover Restore,数据修复,利用备份集的数据文件来替换已损坏的数据文件或将其恢复到另外一个位置, ...
    
			
    6. 
						
  6. HTTP请求常见错误大全
			
    常见的Http请求错误提示 1xx - 信息提示这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个 1xx 响应.100 - 继续101 - 切换协议 2xx - 成功这类状态 ...
    
			
    7. 
						
  7. Excel开发学习笔记：VB.net的一些杂项
			
    遇到一个数据处理自动化的问题,于是打算开发一个基于excel的小工具.在业余时间一边自学一边实践,抽空把一些知识写下来以备今后参考,因为走的是盲人摸象的野路子,幼稚与错误请多包涵. 开发环境基于VST ...
    
			
    8. 
						
  8. 关于无法解析的外部符号 _main
			
    今天在写一段代码的时候,遇到了这个问题,一般遇到这种问题,都是找不到主函数,就是main函数,可是我写的代码是有入口地址main函数的呀.最后发现是自己源文件里,main函数是.c文件,.h文件对应的 ...
    
			
    9. 
						
  9. numpy.percentile
			
    http://docs.scipy.org/doc/numpy/reference/generated/numpy.percentile.html numpy.percentile(a, q, axi ...
    
			
    10. 
						
  10. Android CTS
			
    1.什么是CTS CTS是google制定的兼容性测试包(Compatibility Test Suite),只有通过CTS测试的设备才有可能获得Android的商标和享受Android Market ...
    
			
    11.