案例：无缝的轮播图

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. .NET Core开发的iNeuOS工业互联网平台，发布 iNeuDA 数据分析展示组件，快捷开发图形报表和数据大屏

    目       录 1.      概述... 2 2.      演示信息... 2 3.      简单介绍... 3 4.      产品特点... 4 5.      价值体现... 5 1. ...

  2. 全排列（STL）

    输入一个整数n,输出1~n的全排列(是不是很水) 在此记录stl做法 #include<bits/stdc++.h> using namespace std; ]; int main(){ ...

  3. Docker虚拟化之<基础理论>

    1.虚拟化技术的概念 (1)虚拟化技术主要是将物理的资源转变为逻辑上可以管理的资源,以打破物理结构上的壁垒,让计算元件运行在虚拟的基础上,而不是真实的物理资源上.(2)虚拟化技术的底层是要进行虚拟化的 ...

  4. c语言博客专业05

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...

  5. Matlab交叉验证函数——crossvalind

    Generate cross-validation indices  生成交叉验证索引 Syntax语法 Indices = crossvalind('Kfold', N, K) %K折交叉验证   ...

  6. 【JMX】jmx结合jmx_exporter实现promethues监控

    JMX JMX的全称为Java Management Extensions. 顾名思义,是管理Java的一种扩展.这种机制可以方便的管理.监控正在运行中的Java程序.常用于管理线程,内存,日志Lev ...

  7. c, ANSI C, embedded c, after IKM online assessment

    C programming language was developed in 1972 by Dennis Ritchie at bell laboratories of AT&T (Ame ...

  8. 带着canvas去流浪系列之二 绘制折线图

    [摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  9. Android手机打造你的Python&Java开发工具！

    开发者桌面 之前写过一篇文章:将Android手机打造成你的python开发者桌面 在安卓手机上通过Termux软件,创建一个模拟Linux系统,它的好处就是无需root,即可在手机中编写Python ...

  10. 编译原理 算法3.8 LR分析 c++11实现

    LR分析简介 LR分析是应用最广泛的一类分析方法,它是实用的编译器功能中最强的分析器,其特点是: 1,采用最一般的无回溯移进-规约方法. 2,可分析的文法是LL文法的真超集. 3,能够及时发现错误,及 ...