---恢复内容开始---

  • 效果图说明：当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上，并且按钮会以高亮显示

  • 项目目录结构

  • 用到的js封装的animate()动画

       

 function animate(element, target) {

    clearInterval(element.timeId);

    //定时器的id值存储到对象的一个属性中

    element.timeId = setInterval(function () {

      //获取元素的当前的位置,数字类型

      var current = element.offsetLeft;

      //每次移动的距离

      var step = 10;

      step = current < target ? step : -step;

      //当前移动到位置

      current += step;

      if (Math.abs(current - target) > Math.abs(step)) {

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

      } else {

        //清理定时器

        clearInterval(element.timeId);

        //直接到达目标

        element.style.left = target + "px";

      }

    }, 20);

  }

animate.js

  • 简单轮播图代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

         * {

      margin: 0;

      padding: 0

    }

    ul {

      list-style: none

    }

    img {

      vertical-align: top

    }

    .box {

      width: 730px;

      height: 454px;

      margin: 100px auto;

      padding: 5px;

      border: 1px solid #ccc;

    }

    .inner {

      width: 730px;

      height: 454px;

      background-color: pink;

      overflow: hidden;

      position: relative;

    }

    .inner ul {

      width: 1000%;

      position: absolute;

      top: 0;

      left: 0;

    }

    .inner li {

      float: left;

    }

    .square {

      position: absolute;

      right: 10px;

      bottom: 10px;

    }

    .square span {

      display: inline-block;

      width: 16px;

      height: 16px;

      background-color: #fff;

      text-align: center;

      line-height: 16px;

      cursor: pointer;

    }

    .square span.current {

      background-color: orangered;

      color: #fff;

    }

    </style>

</head>

<body>

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

  <div class="inner"><!--相框-->

    <ul>

      <li><a href="#"><img src="data:images/1.jpg" alt=""/></a></li>

      <li><a href="#"><img src="data:images/2.jpg" alt=""/></a></li>

      <li><a href="#"><img src="data:images/3.jpg" alt=""/></a></li>

      <li><a href="#"><img src="data:images/4.jpg" alt=""/></a></li>

      <li><a href="#"><img src="data:images/5.jpg" alt=""/></a></li>

      <li><a href="#"><img src="data:images/6.jpg" alt=""/></a></li>

    </ul>

    <div class="square">

      <span class="current">1</span>

      <span>2</span>

      <span>3</span>

      <span>4</span>

      <span>5</span>

      <span>6</span>

    </div>

  </div>

</div>

<script src="animate.js"type="text/javascript"></script>

<script>

    /*我们需要操作：

    当点击右下角按钮时对应的图片移动

    1.需要获取ul的宽度

    2.需要获取每个li的宽度

    3.获取相框的宽度

    4.获取右下角的span，并且为每个span注册鼠标移入和移除

    */

    //获取最外面的div

    var oDiv=document.getElementById('box');

    //获取inner由于inner没有用id所有我们用children的方式

    var inner=oDiv.children[0];

    //获取ul以及他的宽度

    var oUl=inner.children[0];

    //获取相框的宽度

    var imgWidth=inner.offsetWidth;

    var oLi=oUl.children;

    //获取sapn

    var oSpan=inner.children[1].children;

    /*为每个span注册鼠标进入的事件,并且鼠标进入时，对应的地方会显示高亮，这里用排他

    排他功能：就是先将全部的属性移除，然后在某个上面加上特有的current属性

    */

    for(var i=0;i<oSpan.length;i++){

      //由于每循环一次i就会变，所以先保存下来

     //循环的时候把索引值保存在每个span的自定义属性中

    oSpan[i].setAttribute("index",i);

    oSpan[i].onmouseover=function(){

    for(var j=0;j<oSpan.length;j++){

        //先去掉其他属性

        oSpan[j].removeAttribute('class');

    }

    this.className="current";

    //移动ul:不管是向左移动还是向右移动ul的left总负的，最大也只可能为0,

     //获取当前鼠标进入的span的索引

      var index=this.getAttribute("index");

      animate(oUl,-index*imgWidth);

    }

    }

</script>

</body>

</html>

简单轮播图.html

  • 轮播图的基本实现（排他功能，用相框的宽度求出移动的距离）

      思路理解：

当鼠标放到按钮上的时候，ul移出去的距离为=相框宽度*按钮的下标

  

  根据上面接下来获取需要用到的元素对象：

//获取最外面的div

    var oDiv=document.getElementById('box');

    //获取inner由于inner没有用id所有我们用children的方式

    var inner=oDiv.children[0];

    //获取ul以及他的宽度

    var oUl=inner.children[0];

    //获取相框的宽度

    var imgWidth=inner.offsetWidth;

    var oLi=oUl.children;

    //获取sapn

    var oSpan=inner.children[1].children;

遍历每个li,并且做排他功能功能

for(var i=0;i<oSpan.length;i++){

      //由于每循环一次i就会变，所以先保存下来

     //循环的时候把索引值保存在每个span的自定义属性中，

    oSpan[i].setAttribute("index",i);

    oSpan[i].onmouseover=function(){

    for(var j=0;j<oSpan.length;j++){

        //先去掉其他属性

        oSpan[j].removeAttribute('class');

    }

    this.className="current";

    //移动ul:不管是向左移动还是向右移动ul的left总负的，最大也只可能为0,

     //获取当前鼠标进入的span的索引

      var index=this.getAttribute("index");

      animate(oUl,-index*imgWidth);

    }

    }

---恢复内容结束---

Js封装的动画函数实现轮播图的更多相关文章

  1. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  2. 原生js用div实现简单的轮播图

    文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...

  3. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  4. 告别组件之教你使用原生js和css写移动端轮播图

    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...

  5. CSS3之动画模块实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 使用原生JS封装一个动画函数

    最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...

  7. 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用

    @charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...

  8. Jquery基础（动画效果的轮播图特效）

    jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...

  9. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

随机推荐

  1. ASP.NET MVC和Web API中的Angular2 - 第1部分

    下载源码 - 903.5 KB 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索 ...

  2. Nginx CGI反向代理对照

    陶辉104 CGI是什么? CGI全称是“通用网关接口”(Common Gateway Interface),HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具

  3. docker 搭建简易仓库registry

    下载仓库镜像: docker pull  registry:2 运行仓库库镜像: docker run -d  -p 5000:5000  -v /usr/local/registry:/var/li ...

  4. 欧拉筛法模板&&P3383 【模板】线性筛素数

    我们先来看欧拉筛法 •为什么叫欧拉筛呢?这可能是跟欧拉有关 •但是为什么叫线性筛呢?因为它的复杂度是线性的,也就是O(n),我们直接来看代码   #include<cstdio> #inc ...

  5. DrawableAnimation小练习

    DrawableAnimation,也就是帧动画,将图片一张张显示出来,从而形成动画的效果 先在项目文件夹下新建一个目录drawable,然后在里面新建一个xml文件,自定义文件名,我的叫my_ani ...

  6. 【XSY2680】玩具谜题 NTT 牛顿迭代

    题目描述 小南一共有\(n\)种不同的玩具小人,每种玩具小人的数量都可以被认为是无限大.每种玩具小人都有特定的血量,第\(i\)种玩具小人的血量就是整数\(i\).此外,每种玩具小人还有自己的攻击力, ...

  7. 【UOJ#340】【清华集训2017】小 Y 和恐怖的奴隶主（矩阵快速幂，动态规划）

    [UOJ#340][清华集训2017]小 Y 和恐怖的奴隶主(矩阵快速幂,动态规划) 题面 UOJ 洛谷 题解 考虑如何暴力\(dp\). 设\(f[i][a][b][c]\)表示当前到了第\(i\) ...

  8. Nifi 模板

        Acqusition_and_Processing.xml Moving templates to own directory to make repo cleaner   CADF_Pars ...

  9. 【原创】POJ 3259 Wormholes(Bellman-Ford) && 简介Bellman-Ford算法

    [原创] 题目大意 John有N个农场,一共有M条边,在农场上出现了W个虫洞(W是一条边),其中M是双向普通边,W是单向虫洞边.John穿行于农场之间每经过一条边(S到E)的时间为+T,每经过虫洞会时 ...

  10. NOIP2012疫情控制(二分答案+树上贪心)

    H 国有n个城市,这 n个城市用n-1条双向道路相互连通构成一棵树,1号城市是首都,也是树中的根节点. H国的首都爆发了一种危害性极高的传染病.当局为了控制疫情,不让疫情扩散到边境城市(叶子节点所表示 ...