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 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
vue实现搜索功能
May 28 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
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
PHP new static 和 new self详解
2017/02/19 PHP
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
简述python Scrapy框架
2020/08/17 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
法学研究生自我鉴定范文
2013/12/04 职场文书
一年级班主任感言
2014/03/08 职场文书
村班子对照检查材料
2014/08/18 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
求职意向书范本
2015/05/11 职场文书
导游词之青城山景区
2019/09/27 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python