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 相关文章推荐
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 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
优化php效率,提高php性能的一些方法
2011/03/24 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
python中os模块详解
2016/10/14 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python 去除字符串中指定字符串
2020/03/05 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
selenium如何定位span元素的实现
2021/01/13 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
说出数据连接池的工作机制是什么?
2013/04/19 面试题
公司财务总监岗位职责
2013/12/14 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
深度学习详解之初试机器学习
2021/04/14 Python