无限轮播图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. PHPCMSV9版本代码审计学习

    学习代码审计,自己简单记录一下.如有错误望师傅斧正. PHPCMS预备知识 PHPCMS是采用MVC设计模式开发,基于模块和操作的方式进行访问,采用单一入口模式进行项目部署和访问,无论访问任何一个模块 ...

  2. varnish配置语言(2)

    目录 1. Backend servers 2. 多个后端 3. Varnish 中的后端服务器和虚拟主机 4. 调度器 5. 健康检查 6. Hashing 7. 优雅模式 Grace mode 和 ...

  3. python numpy 求数组的百位分数

    百分位数,统计学术语,如果将一组数据从小到大排序,并计算相应的累计百分位,则某一百分位所对应数据的值就称为这一百分位的百分位数.运用在教育统计学中,例如表现测验成绩时,称PR值.分位数是以概率将一批数 ...

  4. PAT甲级：1064 Complete Binary Search Tree (30分)

    PAT甲级:1064 Complete Binary Search Tree (30分) 题干 A Binary Search Tree (BST) is recursively defined as ...

  5. 在Linux下安装node及npm

    1.解压 # tar Jxf node-v12.18.3-linux-x64.tar.xz 2.移动到指定目录 # mv node-v12.18.3-linux-x64  /usr/local/nod ...

  6. 2个Double字符串进行

    public static int compare(double d1, double d2) { if (d1 < d2) return -1; // Neither val is NaN, ...

  7. xhell、xftp、putty使用教程

    作为远程登陆工具,上传代码登陆服务器工具 1.XSHELL Xshell是远程连接Linux服务器的工具,基于SSH协议,使用它可以更加方便的操作Linux操作系统,在刚使用时可能需要提前简单的设置下 ...

  8. Python基础之subprocess

    前言 subprocess这个函数很好用,类似于控制台执行,功能很多,今天先介绍subprocess调用exe,并行调用两个或两个以上的exe. Subprocess调用exe 调用exe有几种方式, ...

  9. 【用例】编写App测试用例的关注点

    编写App测试用例的关注点 如何做到测试用例的百分百覆盖一直是测试用例编写过程中的难点,首先在测试时我们经常会遇见一些常见的bug,那么我们可以在编写测试用例时考虑到这些点.    一:关于业务逻辑 ...

  10. Ubuntu Server连接Wi-Fi

    本文将介绍Ubuntu Server如何通过命令行使用wpa_supplicant连接Wi-Fi 环境 Ubuntu Server 20.04(64位) wpasupplicant 配置 1. 安装 ...