<!-- <!DOCTYPE html>

<html>

<head>

    <title>原生JS实现图片循环切换 —— 方法一</title>

    <meta charset="utf-8"/>

    <style type="text/css">

        #img{

            left:50%;

            position: relative;

            top:-50px;

        }

    </style>

</head>

<body>

<div id="div">

    <img id="obj" src="">

</div>

<script type="text/javascript">

    var arr=new Array();

    arr[0]="../img/2.jpg";

    arr[1]="../img/3.jpg";

    arr[2]="../img/bg.jpg";

    arr[3]="../img/1.jpg"

    var curIndex=0;

    setInterval(function(){
　　　　#通过数组将图片的src属性进行修改

        var obj=document.getElementById("obj");

        //var img=document.getElementById("img");

        if(curIndex==arr.length-1){

            curIndex=0;

        }

        else{

            curIndex+=1;

        }

        obj.src=arr[curIndex];

        console.log(curIndex);

    },2000)

</script>

</body>

</html> -->

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>原生JS实现图片循环切换 —— 方法二</title>

        <script type="text/javascript">

            var NowImg=1;//表示当前显示的div

            var MaxImg=4;//表示div的个数

            setInterval(function(){
　　　　　　　　#通过更改元素的display属性来设置显示的图片

                for(var i=1;i<=MaxImg;i++){

                    if(NowImg==i)

                        document.getElementById("div"+NowImg).style.display='block';//当前显示的div

                    else

                        document.getElementById("div"+i).style.display='none';

                }

                if(NowImg==MaxImg)//判断当前div是否是最后一个，如果是则从第一个重新轮回显示

                    NowImg=1;

                else

                    NowImg++;//设置下一个显示的图片

            },1000)

        </script>

    </head>

    <body>

        <div>

            <div id="div1" style="display:block;"><img src="../img/2.jpg" /></div>

            <div id="div2" style="display:none;"><img src="../img/1.jpg" /></div>

            <div id="div3" style="display:none;"><img src="../img/3.jpg" /></div>

            <div id="div4" style="display:none;"><img src="../img/bg.jpg" /></div>

            </div>

        </div>

    <body>

</html>

原生JS实现图片循环切换的更多相关文章

  1. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  2. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  3. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  4. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  5. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  6. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  7. 基于原生js的图片延迟加载

    当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...

  8. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  9. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

随机推荐

  1. （10）python学习笔记一

    学习参考博客:http://blog.csdn.net/a359680405/article/details/42486689  深表感谢 1.单行注释  #    多行注释 "" ...

  2. RabbitMQ消费端ACK与重回队列机制，TTL，死信队列详解（十一）

    消费端的手工ACK和NACK 消费端进行消费的时候,如果由于业务异常我们可以进行日志的记录,然后进行补偿. 如果由于服务器宕机等严重问题,那么我们就需要手工进行ACK保障消费端成功. 消费端重回队列 ...

  3. JAVA 8 ：从永久区（PermGen）到元空间（Metaspace）

    你注意到了吗?JDK 8早期可访问版本已经提供下载了,java 开发人员可以使用java 8 提供的新的语言和运行特性来做一些实验.其中一个特性就是完全的移除永久代(Permanent Generat ...

  4. swiper（轮播）组件

    swiper是一个非常强大的组件 但是需要swiper-item这个标签来实现他想显示的内容 swiper-item标签有个item-id的属性,属性值:字符串 是swiper-item的标识符: 一 ...

  5. 裸BFS题若干

    1poj 3278 http://poj.org/problem?id=3278 #include<math.h> #include<algorithm> #include&l ...

  6. 用Vue来实现音乐播放器（六）：JSONP的封装

    在npm上下载jsonp的包 这个包的用法 传入的参数是地址加上地址参数的混合  但是想封装一个将地址和地址参数分别传入的jsonp方法 所以来封装一个 import originJSONP from ...

  7. Flask框架—flask_sqlalchemy组件使用

    一.flask_sqlalchemy组件 我们之前学过SQLAlchemy,一个独立的数据库关系对象映射,其实在flask中也有官方认可的第三方SQLAlchemy组件,用于处理flask中对象关系映 ...

  8. 快速入门分布式消息队列之 RabbitMQ（1）

    目录 目录 前言 简介 安装 RabbitMQ 基本对象概念 Message 消息 Producer 生产者 Consumer 消费者 Queue 队列 Exchange 交换机 Binding 绑定 ...

  9. Delphi XE2 之 FireMonkey 入门(28) - 数据绑定: TBindingsList: 表达式函数测试: SelectedText()、CheckedState()

    Delphi XE2 之 FireMonkey 入门(28) - 数据绑定: TBindingsList: 表达式函数测试: SelectedText().CheckedState() 示例构想: 用 ...

  10. iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化

    首先需要安装vue cli 3.0版本 点击添加插件, 输入iview 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动 ...