案例：简单轮播图

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. Socket 实现简单的多线程服务器程序

    **********服务器端************* public class ServerSocket{ public static void main(String[] args) throws ...

  2. day20191102笔记

    当日所学默写笔记: 1.select id="唯一,必须写,对应的接口方法名称" resultType="必须写,返回的类型是对应持久化数据层的全限定类名或者是其别名&q ...

  3. Python用正则表达式匹配汉字

    Python用正则表达式匹配汉字 匹配多个汉字,不包括空格 import re res = re.match(r'[\u4E00-\u9FA5]+', '我是 汉字') print(res) # &l ...

  4. SQL语句总结基础篇

    创建数据库 CREATE DATABASE 数据库名称; 删除数据库 DROP DATABASE 数据库名称; 创建新表 create table 表名(列 类型 ,列 类型 ,..); 根据已有的表 ...

  5. WSGI到底是什么？

    在用Python Web开发时经常会遇到WSGI,所以WSGI到底是什么呢?本文我们一起来揭开WSGI神秘的面纱! 先来看一下WSGI的介绍: 全称Python Web Server Gateway ...

  6. 在Tinymce编辑器里，集成数学公式

    在以前,需要在Web页面显示数学公式,常用的都是先制作成图片,然后插入到页面里.这使得后期对数学公式的修改变的麻烦,同时也不利于搜索引擎搜索. 本文将介绍如何在TinyMce编辑器里集成数学公式.先看 ...

  7. vue 常用的官网

    vue.js     https://cn.vuejs.org/ v-charts  https://v-charts.js.org/#/                    (图表,地图) web ...

  8. 消息通知机制(NSNotification和NSNotificationCenter)

    作者:FlyElephant 出处:http://www.cnblogs.com/xiaofeixiang iOS中委托模式和消息机制基本上开发中用到的比较多,一般最开始页面传值通过委托实现的比较多, ...

  9. 用workspace管理工程，并解决多静态库依赖

    from:http://www.cnblogs.com/perryxiong/p/3759818.html   最近我在项目中遇到一些工程之间的管理问题. 模型: 其中 库A 是一个公共的基础静态库, ...

  10. HDU-1698-----Just Hook

    In the game of DotA, Pudge's meat hook is actually the most horrible thing for most of the heroes. T ...