案例：简单轮播图

div叫盒子，里面包了2个小盒子，一个是inner，一个是square

inner的div是放ul，里面有li，a，和图片

square的div里面放span，是轮播图的小点

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title></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="common.js"></script>

  <script>

    //获取最外的div

    var box = my$("box");

    //获取相框

    var inner = box.children[0];

    //获取相框的宽度

    var imgWidth = inner.offsetWidth;

    //获取ul

    var ulObj = inner.children[0];

    //获取所有span标签

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

    //循环遍历所有的span标签，注册鼠标进入的事件

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

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

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

      //注册鼠标进入事件

      spanObjs[i].onmouseover = function () {

        //先干掉所有span的背景颜色

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

          //移除每个span的类样式

          spanObjs[j].removeAttribute("class");

        }

        //设置当前额span背景颜色

        this.className = "current";

        //移动ul,每个图片的宽*鼠标放在此的按钮索引值

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

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

        animate(ulObj, -index * imgWidth);

      };

    }

  </script>

</body>

</html>

JS---案例：简单轮播图的更多相关文章

  1. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  2. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  3. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  4. JS+css3焦点轮播图PC端

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

  5. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  6. 手把手原生js简单轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  7. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  8. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

  9. 简单的 js手写轮播图

    html: <div class="na1">   <div class="pp">    <div class="na ...

随机推荐

  1. MySql分库分表与分区的区别和思考

    一.分分合合 说过很多次,不要拘泥于某一个技术的一点,技术是相通的.重要的是编程思想,思想是最重要的.当数据量大的时候,需要具有分的思想去细化粒度.当数据量太碎片的时候,需要具有合的思想来粗化粒度. ...

  2. 查找节点（getAttribute()）

    getAttribute():方法将返回一个给定元素的一个给定属性节点的值: attributeValue = element.getAttribute(attributeName); 给定属性的名字 ...

  3. day20191001国庆默写

    day20191001国庆默写恢复 重在理解,而不是死记硬背.认真专心看6遍,做6遍. 学会码字,每天码字二小时.持之以恒. 任重道远,出发,走多少算多少.100分的试卷,会做20分也比一个努力也没有 ...

  4. “狗屁不通文章生成器”登顶GitHub热榜，分分钟写出万字形式主义大作

    一.垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高. 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介 ...

  5. ios webp转换jpg

    在项目开发的过程中,遇到了一个问题,就是webp的图片,先解释一下webp是啥,webp是谷歌开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,说白了就是省空间,特别对于 ...

  6. 2019-2020-5 20199317《Linux内核原理与分析》第五周作业

    第4章 系统调用的三层机制(上) 1  用户态.内核态和中断 大多数程序员在写程序时很难离开系统调用,与系统调用打交道的方式是通过库函数的方式,库函数用来把系统调用给封装起来. 计算机的硬件资源是有限 ...

  7. JavaScript实现返回顶部效果

    仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...

  8. Too many open files的四种解决办法

    [摘要] Too many open files有四种可能:一 单个进程打开文件句柄数过多,二 操作系统打开的文件句柄数过多,三 systemd对该进程进行了限制,四 inotify达到上限. 领导见 ...

  9. hibernate绑定session

    session session是一种单实例对象 简单说就是自己用 别人不能用.在一些项目中很多人一起来操作 所以我们可以把session与我们的本地线程一起绑定,本地线程的特点就是执行一次 从创建到销 ...

  10. 压缩感知重构算法之OLS算法python实现

    压缩感知重构算法之OMP算法python实现 压缩感知重构算法之CoSaMP算法python实现 压缩感知重构算法之SP算法python实现 压缩感知重构算法之IHT算法python实现 压缩感知重构 ...