无限轮播图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. MYSQL注入技巧备忘录

    MYSQL一些技巧 仅仅是作为自己备忘录,如果错误,敬请斧正. 0)基础饶过 1.大小写绕过 2.双写绕过 3.添加注释 /*!*/ or /*!小于mysql版本*/ 5.宽字节.Latin1默认编 ...

  2. [刘阳Java]_Spring相关配置介绍_第5讲

    这一节我们介绍一下Spring框架的相关常用配置 Spring依赖注入的两种方式(构造方法注入和setter方式注入) p-namespace方式配置 properties属性文件配置方式 集合对象配 ...

  3. 【论文阅读】Socially aware motion planning with deep reinforcement learning-annotated

    目录 摘要部分: I. Introduction 介绍 II. Background 背景 A. Collision Avoidance with DRL B. Characterization of ...

  4. 算法leetcode二分算法

    二分算法通常用于有序序列中查找元素: 有序序列中是否存在满足某条件的元素: 有序序列中第一个满足某条件的元素的位置: 有序序列中最后一个满足某条件的元素的位置. 思路很简单,细节是魔鬼. 一.有序序列 ...

  5. HTMLTestRunner.py 文件，已修改完成

    """ A TestRunner for use with the Python unit testing framework. It generates a HTML ...

  6. javascript学习五---OOP

    面向对象:JavaScript的所有数据都可以看成对象 JavaScript的面向对象编程和大多数其他语言如Java.C#的面向对象编程都不太一样.如果你熟悉Java或C#,很好,你一定明白面向对象的 ...

  7. vscode配置java+gradle开发环境

    1.安装扩展包Java Extension Pack,里面包含java开发所必须的扩展 2.安装java jdk,8版本就是1.8版本,根据需要安装不同的版本 3.下载gradle,将bin文件夹添加 ...

  8. ECShop 2.x/3.x SQL注入/任意代码执行漏洞

    poc地址:https://github.com/vulhub/vulhub/blob/master/ecshop/xianzhi-2017-02-82239600/README.zh-cn.md 生 ...

  9. Synology群晖100TB万兆文件云服务器NAS存储池类别 RAID 6 （有数据保护）2021年7月29日 - Copy

    Synology群晖100TB万兆文件云服务器NAS存储池类别 RAID 6 (有数据保护)2021年7月29日 - Copy https://www.autoahk.com/archives/367 ...

  10. html页面自动跳转

    <script type="javascrpit"> var url='';//需要跳转的页面 var search = window.location.search; ...