案例：无缝的轮播图

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. 使用Cap解决.Netcore分布式事务

    一.什么是Cap    CAP 是一个基于 .NET Standard 的 C# 库,它是一种处理分布式事务的解决方案,同样具有 EventBus 的功能,它具有轻量级.易使用.高性能等特点. 在我们 ...

  2. kubectl: Error from server: error dialing backend: remote error: tls: internal error

    使用kubectl logs,发现报了tls的错误,然后查看kubelet的日志,发现报了上面的错误,然后通过命令kubectl get csr查看发现有很多处于pending状态 最后通过命令 ku ...

  3. Django ORM-objects-QuerySet

    Django ORM ORM执行查看原生SQL的两种方法 1.在setting中配置 LOGGING = { 'version': 1, 'disable_existing_loggers': Fal ...

  4. C语言|博客作业10

    问题 回答 C语言 博客作业10 这个作业要求在哪里 作业要求 我在这个课程的目标是 熟练循环语句的用法 这个作业在哪个具体方面帮助我实现目标 pta作业 参考文献 <C语言程序设计> 1 ...

  5. c语言l博客作业02

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

  6. 切换控制器的三种手段push modal 切换window的rootViewController

  7. 上传一个项目到GitHub

    在github上创建hello的仓库 上传本地项目文件 echo "# hello" >> README.md git init git add README.md g ...

  8. ActiveMQ配置策略

    1.消息发送 1.异步发送 消息生产者使用持久(persistent)传递模式发送消息的时候,Producer.send() 方法会被阻塞,直到 broker 发送一个确认消息给生产者,这个确认消息暗 ...

  9. nginx反向代理 和部分优化

    准备环境  : 两台web服务     安装http  写入文档  并启动 yum -y install httpd echo "192.168.2.100" > /var/ ...

  10. GROUP_CONCAT在组合商品中的使用

    表:combined_product_item -------------------------pid sku quality-------------------------1 sku1 11 s ...