<!-- <!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. js中switch语句不执行

    参考http://www.jb51.net/article/54393.htm switch语句与if语句的关系最为密切,也是其它编程语言中普遍使用的一种流程控制语句,但switch的匹配是全等模式, ...

  2. [CSP-S模拟测试]:string(线段树)

    题目描述 给定一个由小写字母组成的字符串$s$. 有$m$次操作,每次操作给定$3$个参数$l,r,x$. 如果$x=1$,将$s[l]~s[r]$升序排序: 如果$x=0$,将$s[l]~s[r]$ ...

  3. synchronized 同步

    1.synchronized关键字的作用域有二种: 1)是某个对象实例内,synchronized aMethod(){}可以防止多个线程同时访问这个对象的synchronized方法(如果一个对象有 ...

  4. WebPack Task Runner

    https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner New to WebPack? ...

  5. you have not created a boot efi partition

    rhel6.8 自定义分区,创建 /boot/efi 分区找不到”EFI System Partition“文件系统, 选其他文件系统 next时都提示:you have not created a ...

  6. datatbales的数据源类型(Data source types)

    数据是复杂的,并且所有的数据是不一样的.因此 DataTables 中有很多的选项可用于配置如何获得表中的数据显示,以及如何处理这些复杂的数据. 本节将讨论 DataTables 处理数据的三个核心概 ...

  7. 5个用/不用GraphQL的理由

    我在如何使用Gatsby建立博客 / How to build a blog with Gatsby这篇文章中提过GraphQL在Gatsby中的应用.总的来讲,它是一个新潮的技术,在适宜的使用场景威 ...

  8. Markdown Memo(memorandum)

    居中 html语法 <center>居中</center> 左对齐 <p align="left">左对齐</p> 右对齐 < ...

  9. .bash_profile vs .bashrc

    w http://www.joshstaiger.org/archives/2005/07/bash_profile_vs.html

  10. python 网络编程 代码版

    写博客最怕写什么? 系统原理,框架内核... #!/usr/bin/env python # -*- coding:utf-8 -*- import socket sk = socket.socket ...