案例：简单轮播图

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. python分支循环

    1.遍历循环 for i in range(5) for i in range (M,N,K) for c in s: for c in 'python' print(c,end="&quo ...

  2. Spring 框架基础(05)：事务管理机制，和实现方式

    本文源码:GitHub·点这里 || GitEE·点这里 一.Spring事务管理 1.基础描述 Spring事务管理的本质就是封装了数据库对事务支持的操作,使用JDBC的事务管理机制,就是利用jav ...

  3. 【RN - 基础】之FlexBox弹性布局

    前言 弹性盒模型(The Flexible Box Module),又叫FlexBox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同的屏幕,为盒装模型提供最大的灵活 ...

  4. 把Git Repository建到U盘上去

    Git很火.原因有三: 它是大神Linus Torvalds的作品,天然地具备神二代的气质和品质: 促进了生产力的发展,Git的分布式版本控制理念,并非首创,但非常适合开源社区的协作方式(不存在mas ...

  5. Spring Cloud（二）：Eureka 服务注册中心

    前言 服务治理 随着业务的发展,微服务应用也随之增加,这些服务的管理和治理会越来越难,并且集群规模.服务位置.服务命名都会发生变化,手动维护的方式极易发生错误或是命名冲突等问题.而服务治理正是为了解决 ...

  6. ThinkPHP5——模型(model)的使用

    在使用ThinkPHP5的过程中,我经常使用db进行数据库操作的,后来接触到了模型(model),刚使用时感觉跟db没啥区别,后来查官网知道模型基类中还提供了较多的其他的方法可以方便使用例如获取器.修 ...

  7. Flask框架flash消息闪现学习与优化符合闪现之名

    Flask的flash 第一次知道Flask有flash这个功能时,听这名字就觉得高端,消息闪现-是跳刀blink闪烁躲技能的top10操作吗?可结果让我好失望,哪里有什么闪现的效果,不过是平常的消息 ...

  8. 数据库Oracle的select用法（部分）

    Oracle的select用法(部分): 1.查询所有: select * from employees; 2.加上where子句:用选择限制行 select * from employees whe ...

  9. MyBatis更新，删除，插入

    UserMapper.java: package com.bjsxt.mapper; import java.util.List; import org.apache.ibatis.annotatio ...

  10. hdu3015，poj1990树状数组

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3015 题意:给定n组数,每组数有值x和值h,求n组数两两的val的总和.将所有x和所有h分别离散化(不 ...