案例：无缝的轮播图

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. JAVA中字符串常见操作

    String str1="hello,world";String str2="Hello,World"; 1.字符串的比较:例,System.out.print ...

  2. python实现一可升降式的冒泡排序

    前几天看了个冒泡的排序,这里手敲了一下代码,简单记录如下: def bubble_sort(arr, order='asc'): # #可选升降序的冒泡排序, order>0升序,order&l ...

  3. CCNA 之 六 路由协议 二 EIGRP

    EIGRP(Enhanced IGRP) 增强型内部网关路由协议 注意:这是cisco私有协议:也就是说,该协议只能运行在思科的设备上,如果有其他的厂家的设备,则不能保证能运行此协议: EIGRP的特 ...

  4. thinkPHP5开发智慧软文遇到的分页第二页不显示数据的问题

    在进行结果查询进行分页的时候,发现分页第一页数据正常,第二页没有数据,后面问题一样,这个是因为直接使用了: 如果此处使用如下语句: $lst=NewsModel::order('sendtime de ...

  5. 纯CSS背景噪声.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Python一秒搭建ftp服务器，帮助你在局域网共享文件

    "老板 来碗面" "要啥面?" "内牛满面.." 最近项目上的事情弄得人心累,本来是帮着兄弟项目写套入口代码,搞着搞着就被拉着入坑了.搞开发 ...

  7. 使用Python为中秋节绘制一块美味的月饼

    每逢佳节- 对于在外的游子,每逢佳节倍思亲.而对于996ICU的苦逼程序猿们,最期待的莫过于各种节假日能把自己丢在床上好好休息一下了.这几天各公司都陆续开始发中秋礼品了.朋友圈各种秀高颜值的月饼,所以 ...

  8. NRF5340首款双核处理器无线SoC

    nRF5340基于Nordic经过验证并在全球范围广泛采用的nRF51和nRF52系列多协议SoC而构建,同时引入了具有先进安全功能的全新灵活双处理器硬件架构,支持包括蓝牙5.1/低功耗蓝牙 (Blu ...

  9. TortoiseGit 设置ssh方式

    TortoiseGit使用扩展名为ppk的密钥,而不是ssh-keygen生成的rsa密钥. 也就是说使用 ssh-keygen  -t rsa  -C "576953565@qq.com& ...

  10. hdu4585Shaolin

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4585 题意: 第一个人ID为1,战斗力为1e9. 给定n,给出n个人的ID和战斗力. 每个人必须和战斗 ...