在学习轮播图之前，要先会切换图片：

找三张图片，命名1.jpg,2.jpg,3.jpg

示例：

<!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>

上面代码是通过按钮切换图片

轮播图自动切换图片，用到onload事件

JS代码：

            function init(){

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

                setInterval("changeImg()",3000);

            }

            //函数

            var i=0

            function changeImg(){

                i++;

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

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

                if(i==3){

                    i=0;

                }

            }

HTML代码：

这里要注意：onload写在body标签中

<!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>

            function init(){

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

                window.setInterval("changeImg()",1000);

            }

            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>

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

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

        </div>

    </body>

</html>

每一秒自动切换一张图片

JS应用实例2：轮播图的更多相关文章

  1. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  2. 实例练习——轮播图 & 全选/全不选

    1 实例1:轮播图 1)实质就是改变图片的src 2)把图片的路径用数组存起来 3) “下一张”的实现就是改变数组的下标,用一个变量i控制,每次点击下标加1.“上一张”的实现正好相反.注意“i的变化” ...

  3. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  4. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  5. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  6. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  7. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  8. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  9. js原声代码 轮播图

    js轮播图 html部分:建立div,内嵌img标签,可以设置大小, <!doctype html> <html> <head> <meta charset= ...

  10. js 自适应手机电脑 轮播图

    自己写了一个javascript的可循环轮播图,支持手机滑动,不过代码着实小白,全局变量,函数调用满天飞,研究别的代码规范好的轮播图插件,表示看得懂但是写不出.. HTML: <div id=& ...

随机推荐

  1. SpringJDBC中jdbcTemplate 的使用

    一:定义 SpringJDBC是spring官方提供的一个持久层框架,对JDBC进行了封装,提供了一个JDBCTemplated对象简化JDBC的开发.但Spring本身不是一个orm框架,与hibe ...

  2. Python设计模式 - 基础 - 封装 & 继承 & 多态

    面向对象的核心是对象,世间万物都可以看作对象,任何一个对象都可以通过一系列属性和行为来描述,可以包含任意数量和类型的数据或操作.类是用来描述具有相同属性和方法的所有对象的集合.类通常是抽象化的概念,而 ...

  3. 连续子数组最大和(python)

    题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...

  4. [SpringBoot]Web综合开发-笔记

    Web开发 Json接口开发 @RestController 给类添加 @RestController 即可,默认类中的方法都会以 json 的格式返回. 自定义filter filter作用: 用于 ...

  5. [leetcode]47. Permutations全排列(给定序列有重复元素)

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  6. Swift MD5加密

    很多时候我们会用到md5加密,下面是swift 3.0的实现方法: 首先新建桥接文件 xx-Bridging-Header,方法很多,这里就不介绍了. 然后在桥接文件中引入加密库 #import &l ...

  7. 15. pk-mext

    在平时的生产环境中,我们经常会碰到监控MySQL的各个状态值的一个变化趋势,然后就会自己写个脚本,将status快照保存到文本中.当我们去分析的时候,需要自己去比较差值,是一件比较麻烦的时候,虽然可以 ...

  8. android studio 将自己的项目生成jar包

    很多情况下我们开发的项目不是一个完整的app,而是完成一部分功能,供别人的app使用的情况.这时就需要将我们的项目打包生成jar或者arr库文件,让别人的app导入我们的jar包,就能直接使用我们项目 ...

  9. python发送邮箱

    一.Python发送邮件 import smtplib from email.mime.text import MIMEText def send(email_to,title,content): m ...

  10. 渗透测试的理论部分2——OSSTMM的详细描述

    昨天休息了一天,今天我要连更两篇博客,作为补充,以下为正文 本章详细描述了OSSTMM内的RAV得分这一理论概念,对日后从事正规安全工作至关重要 OSSTMM为开源安全测试方法论,对OSSTMM不了解 ...