JavaScript实现简单图片轮播效果


Posted in Javascript onAugust 21, 2017

本文实例为大家分享了js实现简单图片轮播的具体代码,最终实现效果图

JavaScript实现简单图片轮播效果

代码块

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
     <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    img {
      vertical-align: top
    }

    .box {
      width: 490px;
      height: 170px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
    }

    .inner {
      width: 490px;
      height: 170px;
      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="images/01.jpg" /></a></li>
          <li><a href="#"><img src="images/02.jpg" /></a></li>
          <li><a href="#"><img src="images/03.jpg" /></a></li>
          <li><a href="#"><img src="images/04.jpg" /></a></li>
          <li><a href="#"><img src="images/05.jpg" /></a></li>
        </ul>
        <div class="square">
          <span class="current">1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
        </div>
      </div>
    </div>


  <script type="text/javascript">
    //鼠标经过按钮 按钮排他
    var box = document.getElementById("box");
    var inner = box.children[0];      //获取box下的第一个元素,也就是inner
    var ul = inner.children[0];       //获取inner下的ul
    var squareList = inner.children[1];   //获取inner下的第二个元素
    var squares = squareList.children;   //获取所有的按钮
    var imgWidth = inner.offsetWidth;
//   alert(imgWidth);
    //给每个按钮注册鼠标经过事件
    for(var i=0; i<squares.length; i++){
      squares[i].index = i;      //把索引保存在自定义属性中
      squares[i].onmouseover = function(){  //鼠标经过事件
        //排他 干掉所有人 
        for(var j=0; j<squares.length; j++){
          squares[j].className = "";
        }
        //留下我自己
        this.className = "current";
        //以动画的方式把ul移动到指定的位置
        //目标 和当前按钮索引有关,和图片宽度有关 而且是负数
        var target = -this.index * imgWidth;  //获取到索引
        animate(ul,target);
      }
    }


    function animate(obj, target) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var step = 20;
        var step = obj.offsetLeft < target ? step : -step;
        if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {
          obj.style.left = obj.offsetLeft + step + "px";
        } else {
          obj.style.left = target + "px";
          clearInterval(obj.timer);
        }
      }, 15)
    }


  </script>



  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
jquery插件格式实例分析
Jun 16 Javascript
基本DOM节点操作
Jan 17 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
基于node.js之调试器详解
Aug 22 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 #Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 #Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 #Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 #Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 #Javascript
JS实现身份证输入框的输入效果
Aug 21 #Javascript
Vue自定义指令使用方法详解
Aug 21 #Javascript
You might like
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
js友好的时间返回函数
2016/08/24 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python中bisect的使用方法
2019/12/31 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
python中字符串的编码与解码详析
2020/12/03 Python
Django自带的用户验证系统实现
2020/12/18 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
生物科学专业个人求职信范文
2013/12/07 职场文书
高中体育教学反思
2014/01/24 职场文书
个人优缺点自我评价
2014/01/27 职场文书
销售顾问岗位职责
2014/02/25 职场文书
学习经验交流会策划书
2015/11/02 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python