无限轮播图js源代码，今天介绍一下用js简单的编写无限轮播图
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>无限轮播图</title>
    <style media="screen">
      /*样式设置*/
      * {
        margin: 0px;
        padding: 0px;
      }
      #slider_wrap {
        width: 1600px;
        height: 270px;
        margin: 100px auto;
        border: 1px solid black;
        position: relative;
        overflow: hidden;
      }
      #slider_content {
        width: 4800px;
        height: 270px;
        position: absolute;
      }
      #slider_content img {
        width: 400px;
        height: 270px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="slider_wrap">
      <div id="slider_content">
        <img src="img/1.jpg" alt="" />
        <img src="img/2.jpg" alt="" />
        <img src="img/3.jpg" alt="" />
        <img src="img/4.jpg" alt="" />
        <img src="img/5.jpg" alt="" />
        <img src="img/6.jpg" alt="" />
      </div>
    </div>
    <form class="btn_sets" action="index.html" method="post" style="margin-left: 900px">
      <input type="button" name="name" value="下一张" onclick="btnLeft()">
      <input type="button" name="name" value="上一张" onclick="btnRight()">
    </form>
  </body>
  <script type="text/javascript">
    var sliderContent = document.getElementById('slider_content');
    // 定义一个变量x，记录x轴的位置
    var x = 0;
    // 将slider_content中的图片复制一次
    sliderContent.innerHTML += sliderContent.innerHTML;
    // 添加鼠标点击事件
    function btnLeft() {
      if (x == -2400) { //假如图片移动到最后一个时，将x设置为0；
        x = 0;
      }
      x -= 400;  //图片沿x轴方向向左移动400px
      sliderContent.style.left = x + 'px';  //图片左移
    }
    function btnRight() {
      if (x == 0) {
        x = -2400;
      }
      x += 400;
      sliderContent.style.left = x + 'px';
    }
    setInterval('btnLeft()',5000);
  </script>
</html>
结果如图所示：

简单介绍无限轮播图，js源代码的更多相关文章

  1. 前端（十七）—— jQuery基础：jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

    jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...

  2. 一步一步拆解一个简单的iOS轮播图（三图）

    导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...

  3. iOS最笨的办法实现无限轮播图（网络加载）

    iOS最笨的办法实现无限轮播图(网络加载) 简单的做了一下: 使用方法: 把 请求返回的 图片地址(字符串类型)放进数组中就行 可以使用SDWebImage(我就是用的这个)等..需要自己导入并引用, ...

  4. 用UICollectionView实现无限轮播图

    用UICollectionView实现无限轮播图 效果 源码 https://github.com/YouXianMing/Animations 细节

  5. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  6. Android之无限轮播图源代码

    Android轮播广告图是大家经常用到的一个控件今天便撸了一把代码 实现步骤 使用Viewpager进行实现图片滑动 设置ViewPager的数据,让其无限切换 Activity代码 public c ...

  7. 轮播图--JS手写

    轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...

  8. 超级简单的jquery轮播图demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 轮播图--js课程

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 【网络IO系列】IO的五种模型，BIO、NIO、AIO、IO多路复用、 信号驱动IO

    前言 在上一篇文章中,我们了解了操作系统中内核程序和用户程序之间的区别和联系,还提到了内核空间和用户空间,当我们需要读取一条数据的时候,首先需要发请求告诉内核,我需要什么数据,等内核准备好数据之后 , ...

  2. Java on Visual Studio Code的更新 – 2021年6月

    Nick Zhu from Microsoft VS Code Java Team 大家好,欢迎来到 Visual Studio Code Java 更新的特别年中版.作为这篇文章的重点,我们将看看接 ...

  3. C语言：编程求任意月份的天数

    闰年问题,因为二月份的天数与闰年有关.闰年的判断依据是:若某年能被4整除,但不能被100整除,则这一年是闰年:若某年能被400整除,则这一年也是闰年 #include <stdio.h> ...

  4. C语言：特殊点

    编译器给变量分配内存在函数外部定义的变量叫做全局变量(Global Variable),在函数内部定义的变量叫做局部变量(Local Variable)一个变量,即使不给它赋值,它也会有一个默认的值, ...

  5. 高校表白App-团队冲刺第五天

    今天要做什么 封装Adapter制作引导页 今天做了什么 成功封装工具类,为以后的轮播做了铺垫 遇到的问题 在封装时采用数组容器进行操作,只能添加图片作为元素,对于layout不可加入

  6. Quick BI的复杂系统为例：那些年，我们一起做过的性能优化

    背景 一直以来,性能都是技术层面不可避开的话题,尤其在中大型复杂项目中.犹如汽车整车性能,追求极速的同时,还要保障舒适性和实用性,而在汽车制造的每个环节.零件整合情况.发动机调校等等,都会最终影响用户 ...

  7. Redis学习——数据结构上

    一.常用的全局命令 1.查看所有的键: KEYS * KEYS pattern:查找所有符合给定模式 pattern 的 key . KEYS 的速度非常快,但在一个大的数据库中使用它仍然可能造成性能 ...

  8. springboot多个service互相调用的事务处理（十三）

    在一个service的方法A中,调用另一个service的方法B,方法A和方法B均存在数据库插入操作,需要添加如下配置: @Transactional(rollbackFor = Exception. ...

  9. 深入刨析tomcat 之---第8篇 how tomcat works 第11章 11.9应用程序,自定义Filter,及注册

    writed by 张艳涛, 标签:全网独一份, 自定义一个Filter 起因:在学习深入刨析tomcat的学习中,第11章,说了调用过滤链的原理,但没有给出实例来,自己经过分析,给出来了一个Filt ...

  10. Spring Security OAuth2 远程命令执行漏洞（CVE-2016-4977）

    影响版本: 2.0.0-2.0.9 1.0.0-1.0.5 poc地址 https://github.com/vulhub/vulhub/blob/master/spring/CVE-2016-497 ...