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实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
移动端js图片查看器
Nov 17 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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新手上路(六)
2006/10/09 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
javascript常用函数(1)
2015/11/04 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python 3中的yield from语法详解
2017/01/18 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
使用python编写监听端
2018/04/12 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
人事行政主管岗位职责
2013/12/22 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
医院护士工作检讨书
2014/10/26 职场文书
求职自我评价参考范文
2019/05/16 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android