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 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 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笔记 字符串处理
2010/10/19 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
PHP7 其他修改
2021/03/09 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
js实现密码强度检验
2017/01/15 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
使用python实现ANN
2017/12/20 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
python爬虫---requests库的用法详解
2020/09/28 Python
Python实现疫情地图可视化
2021/02/05 Python
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
护士辞职信模板
2014/01/20 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
保密协议书范本
2014/04/22 职场文书
青年志愿者活动方案
2014/08/17 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
绿色校园广播稿
2014/10/13 职场文书
会议主持词开场白
2015/05/28 职场文书
学生会自荐信
2019/05/16 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle