案例：简单轮播图

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. ctf中关于图片的隐写随笔（不全）

    ①JPG图片的结束符,十六进制常为FFD9 ②binwalk的原理是:检查常见的文件头信息,如果不符合,一定有隐藏信息.③JPG是有损压缩,PNG是无损压缩,BMP是不压缩. 隐写的基本原理:图片查看 ...

  2. Win10无法安装.NET Framework3.5的解决办法

    诸位网友如果工作中使用WIN10遇到如图的这种问题,现将解决办法整理如下: 一.第一步就是修复系统:按“Windows+X”点击“Windows PowerShell(管理员)&命令提示符(管 ...

  3. 渗透测试初学者的靶场实战 1--墨者学院SQL注入—布尔盲注

    前言 大家好,我是一个渗透测试的爱好者和初学者,从事网络安全相关工作,由于爱好网上和朋友处找了好多关于渗透的视频.工具等资料,然后自己找了一个靶场,想把自己练习的体会和过程分享出来,希望能对其他渗透爱 ...

  4. jsp html 实现隐藏输入框，点击可以取消隐藏&&弹出输入框

    jsp代码: <script language="javascript" type="text/javascript"> function chg ...

  5. python中字典数据类型常用操作

    创建字典 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 ,格式如下所示: ...

  6. WebGL简易教程——目录

    目录 1. 绪论 2. 目录 3. 资源 1. 绪论 最近研究WebGL,看了<WebGL编程指南>这本书,结合自己的专业知识写的一系列教程.之前在看OpenGL/WebGL的时候总是感觉 ...

  7. 大规模机器学习在LinkedIn预测模型中的应用实践

    预测模型在 LinkedIn 的产品中被广泛应用,如 Feed.广告.工作推荐.邮件营销.用户搜索等.这些模型在提升用户体验时起到了重要的作用.为了满足建模需求,LinkedIn 开发并且开源了 Ph ...

  8. 我是怎样测试Java类的线程安全性的

    线程安全性是Java等语言/平台中类的一个重要标准,在Java中,我们经常在线程之间共享对象.由于缺乏线程安全性而导致的问题很难调试,因为它们是偶发的,而且几乎不可能有目的地重现.如何测试对象以确保它 ...

  9. js-编程练习题-输出年月日以及练习字符串分割,检索,转换整数(int)

    这是在慕课网上看到的编程题-如有侵权,请联系本人删除. 当然:题是他们的,做题是我的...嘿嘿嘿 某班的成绩出来了,现在老师要把班级的成绩打印出来. 效果图: XXXX年XX月X日 星期X--班级总分 ...

  10. 使用 Spring 提供的 restTemplate 完成 Http 服务消费

    RestTemplate 介绍 RestTemplate 是 Spring 提供的用于访问 Rest 服务的客户端,RestTemplate 提供了多种便捷访问远程 Http 服务的方法,能够大大提高 ...