Javascript实现网页图片自动轮播

1、创建一个img标签

设置默认图片，以及图片的高度和宽度，为了大家方便，我将CSS样式和JS语句都写在一个html文件中，演示用的图片来自小明官网：'https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg' 和 'https://i1.mifile.cn/a4/xmad_15378467692556_lnrbU.jpg'

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<a href="">

<img id="i1" src="https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg" style="width: 1266px;height: 460px" alt="">   //将img标签设置到a标签中（可以把a标签设置成块显示）并设置图片高宽度

</a>  

</body>

</html>

运行效果：

这样就显示了一张图片在网页上

实现图片轮播

如何实现图片轮播，我们可以这样思考，实现轮播就是上面a标签的src被修改，而且是定时循环修改，这时候你就想到了js中DOM中setinterva方法，于是写出了以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<a href=""><img id="i1" src="https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg" style="width: 1266px;height: 460px" alt=""></a>

<script>

   function foo()

   {

       //创建要轮播的图片列表，元素为图片地址

       let imgList = ['https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg','https://i1.mifile.cn/a4/xmad_15378467692556_lnrbU.jpg'];

       //找到要轮播图片的img标签,通过id寻找

       let imgTable=document.getElementById('i1');

       //获取当前img标签的src，

       let img_src= imgTable.getAttribute('src');

       //获取当前src在图片列表中的索引，如果该索引加一小于等于列表长度，即可索引加1，修改src播放下一张图片

       let img_index = imgList.indexOf(img_src)+1;

       if (img_index<imgList.length)

       {

           imgTable.setAttribute('src',imgList[img_index]);

       }

       else

       {

           imgTable.setAttribute('src',imgList[0])

       }

   }

    setInterval(foo,2000)

</script>

</body>

</html>

前端使用Javascrip实现图片轮播的更多相关文章

  1. Unslider Web前端框架之图片轮播

    前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...

  2. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

  3. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  4. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  5. 基于面向对象的图片轮播（js原生代码）

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

  6. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  7. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  8. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  9. html css+div+jquery实现图片轮播

    一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...

随机推荐

  1. ASP.NET Core 添加区域步骤（详细）

    1 前言 早就想总结一下,但是没时间,这次有时间了,就详细的把步骤写出来. 2 步骤 2.1 添加区域 右键项目->添加->区域,如图1: 区域名称:Ceshi 添加完之后解决方案管理器会 ...

  2. vuex mapState、mapGetters、mapActions、mapMutations的使用

    例子: index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' impor ...

  3. 如何在Github中删除已有仓库或文件

    一.删除已有仓库如果我们想要删除Github中没有用的仓库,应该如何去做呢? 进入到我们需要删除的仓库里面,找到“settings”即仓库设置: 然后,在仓库设置里拉到最底部,找到“Danger Zo ...

  4. HDU - 1754 线段树-单点修改+询问区间最大值

    这个也是线段树的经验问题,待修改的,动态询问区间的最大值,只需要每次更新的时候,去把利用子节点的信息进行修改即可以. 注意更新的时候区间的选择,需要对区间进行二分. #include<iostr ...

  5. A4纸尺寸 web打印报告

    A4纸对应的像素尺寸: <style> @media print { .Noprn{ display:none;} .print-hidden { display: none !impor ...

  6. 使用HDTune规避硬盘上损坏的扇区

    如何使用HDTune扫描磁盘上的错误在网上已经有很多帖子了,但扫描到之后如何用HDTune来规避硬盘上损坏的扇区呢? HDTune并不能直接规避,而是需要重新划分磁盘的卷.HDTune一行有50个小方 ...

  7. windows下linux子系统安装

    1.打开Windows功能中的使用于linux的Windows子系统 2.应用商店中下载需要的linux 3.下载完成后运行等待安装并输入用户名密码  4.查看系统信息 先后 sudo apt-get ...

  8. 【Python3练习题 002】企业发放的奖金根据利润提成

    # [Python练习题 002]企业发放的奖金根据利润提成.# 利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分, ...

  9. ascii、unicode、utf-8、gbk 区别

    原文:https://blog.csdn.net/u010262331/article/details/46013905 ASCII:遇上0×10, 终端就换行: 遇上0×07, 终端就向人们嘟嘟叫: ...

  10. node错误中间件处理 express类 带有路由操作

    let express = require('express'); let app = new express(); let bodyParser = require('body-parser'); ...