案例：无缝的轮播图

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. 都9012了，Java8中的日期时间API你还没有掌握？

    一,Java8日期时间API产生的前因后果 1.1 为什么要重新定义一套日期时间API 操作不方便:java中最初的Date不能直接对指定字段进行加减操作也不支持国际化,后来新增了Calendar,但 ...

  2. spring+cxf 开发webService(主要是记录遇到spring bean注入不进来的解决方法)

    这里不介绍原理,只是记录自己spring+cxf的开发过程和遇到的问题 场景:第三方公司需要调用我们的业务系统,以xml报文的形式传递数据,之后我们解析报文存储到我们数据库生成业务单据: WebSer ...

  3. 最小路径算法（Dijkstra算法和Floyd算法）

    1.单源点的最短路径问题:给定带权有向图G和源点v,求从v到G中其余各顶点的最短路径. 我们用一个例子来具体说明迪杰斯特拉算法的流程. 定义源点为 0,dist[i]为源点 0 到顶点 i 的最短路径 ...

  4. MySQL分层和查询数据的流程

    MySQL分层 MySQL分层 主要分为:连接层,服务层,引擎层,存储层 客户端执行一条select命令的流程如下 连接器 功能: 负责跟客户端建立连接.获取权限.维持和管理连接 细节: 1.当用户登 ...

  5. __dict__和dir()的区别

    __dict__和dir()的区别 dir() 一般用来查看模块的属性 __dict__从某方面上来说是dir()的子集 可以直接打印dir(),显示的是当前执行文件所有的属性 __dict__ __ ...

  6. 把一个控制器的view添加到另外一个控制器

  7. PHP计算两组经纬度坐标之间的距离

    定义π define('PI',3.1415926535898); define('EARTH_RADIUS',6378.137); 计算两组经纬度坐标 之间的距离 /** * 计算两组经纬度坐标 之 ...

  8. 品HashMap（java8）

    前言 作为java开发人员,HashMap可谓是业务中的一把利器,9龙再次捡起这老生常谈的知识点,深入源码,细细品味. 首先,我们抛出几个关于HashMap的问题,带着问题去学习,就像捉迷藏一样有意思 ...

  9. ajax加载引起瀑布流布局堆叠

    jQuery 瀑布流使用ajax加载数据库图片url ,ajax每次请求到的数据不变时,瀑布流效果没问题. 但当请求到的数据变化时,瀑布流图片格式会重叠 或者相隔很远等等的格式问题,这是由于图片加载是 ...

  10. 批量注释 control+/

    批量注释 control+/ You can comment and uncomment lines of code using Ctrl+斜杠.Ctrl+斜杠 comments or uncomme ...