案例：无缝的轮播图

w

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      list-style: none;

    }

    img {

      vertical-align: top;

    }

    /*取消图片底部3像素距离*/

    .box {

      width: 300px;

      height: 200px;

      margin: 100px auto;

      background-color: pink;

      border: 1px solid red;

      position: relative;

      overflow: hidden;

    }

    .box ul li {

      float: left;

    }

    .box ul {

      width: 1500px;

      position: absolute;

      left: 0;

      top: 0;

    }

  </style>

</head>

<body>

  <div class="box" id="screen">

    <ul>

      <li><img src="data:imagess/01.jpg" alt="" /></li>

      <li><img src="data:imagess/02.jpg" alt="" /></li>

      <li><img src="data:imagess/03.jpg" alt="" /></li>

      <li><img src="data:imagess/04.jpg" alt="" /></li>

      <li><img src="data:imagess/01.jpg" alt="" /></li>

    </ul>

  </div>

  <script src="common.js"></script>

  <script>

    var current = 0;//只声明了一次

    function f1() {

      //获取ul里面的子元素

      var ulObj = my$("screen").children[0];

      //从当前位置每一次向左移动10px

      current -= 10;

      //判断当前位置超过-1200,就回到0的位置

      if (current < -1200) {

        ulObj.style.left = 0 + "px";

      } else {

        ulObj.style.left = current + "px";

      }

    }

    var timeId = setInterval(f1, 30)

    my$("screen").onmouseover = function () {

      clearInterval(timeId);

    };

    my$("screen").onmouseout = function () {

      timeId = setInterval(f1, 30)

    };

  </script>

</body>

</html>

JS---案例：无缝的轮播图的更多相关文章

  1. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  2. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  3. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  4. 原生无缝Banner轮播图

    话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...

  5. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  6. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  7. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  8. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  9. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

随机推荐

  1. ubuntu windows mutual remote control

    Win10 remote control Ubuntu18 Part1.ubuntu settings 1.安装所需组件 sudo apt-get update //若没有desktop sharin ...

  2. scikit-learn网格搜索来进行高效的参数调优

    内容概要¶ 如何使用K折交叉验证来搜索最优调节参数 如何让搜索参数的流程更加高效 如何一次性的搜索多个调节参数 在进行真正的预测之前,如何对调节参数进行处理 如何削减该过程的计算代价 1. K折交叉验 ...

  3. 计蒜客 The Preliminary Contest for ICPC Asia Nanjing 2019

    F    Greedy Sequence You're given a permutation aa of length nn (1 \le n \le 10^51≤n≤105). For each  ...

  4. C/C++资料

    链接:https://pan.baidu.com/s/1kLLA-teI7Jzxhozx1R6NMw 提取码:6hpb

  5. CA-RNN论文读取

    ***CA-RNN: Using Context-Aligned Recurrent Neural Networks for Modeling Sentence Similarity(CA-RNN:使 ...

  6. tp5引用第三方类vendor或extend（多种方法）

    extend 方法一:命名空间引入 我们只需要把自己的类库包目录放入EXTEND_PATH目录(默认为extend,可配置),就可以自动注册对应的命名空间,例如: 我们在extend目录下面新增一个l ...

  7. U盘中病毒无法更改U盘隐藏属性，文件变成快捷方式

    问题:U盘中病毒了文件都变成快捷方式了,文件被隐藏:隐藏属性无法修改 解决方法: 1.首先给U盘杀毒[如360杀毒] 2.修改U盘隐藏属性:如下图 经过此步骤被隐藏的文件可以被显示出来了.但是U盘里的 ...

  8. 华为云ROMA，联接企业应用的现在与未来

    2019.9.19日,在华为全联接大会的华为云Summit中,华为云CTO宇昕总提出:"企业的应用与数据集成,始终是数字化转型和智能化升级的关键,华为云企业应用与数据集成平台ROMA,打破时 ...

  9. Go游戏服务端框架从零搭建（一）— 架构设计

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居海边. 本教程以Go语言分区游戏服务端框架搭建为例. Go语言是Google开发的一种静态强类型.编译型.并发型.具有垃圾回收功能的编程语言.语法上近似C语 ...

  10. nbuoj 2080 洛谷p1025 数的划分

    链接:http://www.nbuoj.com/v8.83/Problems/Problem.php?pid=2820 链接:https://www.luogu.org/problem/P1025 题 ...