JavaScript实现简单图片轮播效果

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

代码块

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

rush:xhtml;">

Box" id="Box">

2 3 4 5

<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)
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文地址：https://www.jb51.cc/js/36952.html