无限轮播图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. Hive源码上手及问题解决

    一.编译准备 1.下载源码包 https://github.com/apache/hive/archive/refs/tags/rel/release-2.3.7.zip 或使用git直接拉取 无法解 ...

  2. 洛谷 P4008 [NOI2003]文本编辑器

    先推广一下 求赞 我们考虑这样的一个问题 给你一个序列,要求你支持插入,删除,查询单点值 如果用数组,查询O(1),插入删除最坏O(n) 如果用链表,插入删除O(1),查询最坏O(n) 如果用平衡树- ...

  3. python:录屏录音

    import pyaudio import wave from PIL import ImageGrab import cv2 import threading import time from nu ...

  4. python adb 关闭拼多多

    def gbpdd(sjh): aaka="adb -s {0} shell am force-stop com.xunmeng.pinduoduo".format(sjh) aa ...

  5. Linux从入门到进阶全集——【第十四集：Shell编程-export命令】

    参考: https://www.cnblogs.com/guojun-junguo/p/9855356.html 功能说明:设置或显示环境变量. 语 法:export [-fnp][变量名称]=[变量 ...

  6. 通过http将yum仓库发布

    说明:这里是Linux服务综合搭建文章的一部分,本文可以作为单独构建http和发布yum仓库到内网的参考. 注意:这里所有的标题都是根据主要的文章(Linux基础服务搭建综合)的顺序来做的. 如果需要 ...

  7. Linkerd 金丝雀部署与 A/B 测试

    本指南向您展示如何使用 Linkerd 和 Flagger 来自动化金丝雀部署与 A/B 测试. 前提条件 Flagger 需要 Kubernetes 集群 v1.16 或更新版本和 Linkerd ...

  8. odoo里的javascript学习---自定义插件

    插件效果图 定义js odoo.define('auto_widget',function(require){ "use strict"//通过扩展AbstractField来扩展 ...

  9. OpenSUSE Leap 42.1 KDE Ultmate Linux Distribution终极Linux系统试用与SSH连接

    系统安装环境: #一台旧笔记本电脑 #CPU Intel(R) Core(TM) i3 M 380 2.53GHz (4核) #内存 1G #硬盘存储 250G #系统型号 OpenSUSE Leap ...

  10. ts 学习笔记-基础篇

    目录 基础 原始数据类型 布尔值 数字 字符串 空值 Null 和 Undefined 任意值 类型推论 联合类型 接口 数组 函数 类型断言 申明文件 什么是申明文件 三斜线指令 第三方声明文件 内 ...