js实现旋转木马轮播图

本文实例为大家分享了js实现旋转木马轮播图的具体代码，供大家参考，具体内容如下

整个页面的文件结构如下图所示：

html部分代码：

在html部分引入的myStyle.css文件部分代码

@charset "UTF-8";
 
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
  margin:0;
  padding:0
}
 
body,button,input,select,textarea{
  font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
  color:#666;
}
 
ol,ul{
  list-style:none
}
 
a{
  text-decoration:none
}
 
fieldset,img{
  border:0;
  vertical-align:top;
}
 
a,input,button,select,textarea{
  outline:none
}
 
a,button{
  cursor:pointer
}
 
.wrap{
  width:1200px;
  margin:100px auto;
}
.slide{
  height:500px;
  position: relative;
}
 
.slide li{
  position:absolute;
  left:200px;
  top:0
}
 
.slide li img{
  width:100%
}
 
.arrow{
  opacity:0;
}
 
.prev ,.next{
  width:76px;
  height:112px;
  position:absolute;
  top:50%;
  margin-top:-56px;
  background:url(../images/prev.png) no-repeat;
  z-index:99;
}
 
 
.next{
  right:0;
  background-image:url(../images/next.png);
}

在html部分引入的animate.js文件部分代码

/**
 * Created by RENPINGSHENG on 2018/4/6.
 */
 
function animate(obj,json,fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    var flag = true;
    for(var k in json){
      if( k == "opacity"){
        var leader = getStyle(obj,k) * 100;
        var target = json[k] * 100;
        var step = (target - leader) /10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        leader = leader + step;
        obj.style[k] = leader /100;
      } else if ( k == "zIndex"){
        obj.style[k] = json[k];
      }else{
        var leader = parseInt(getStyle(obj,k)) || 0;
        var target = json[k];
        var step = (target - leader) /10;
        step = step >0 ? Math.ceil(step) : Math.floor(step);
        leader = leader + step;
        obj.style[k] = leader + "px";
      }
 
      console.log("target:" + target + "leader:" + leader + "step:" + step);
      if (leader != target){
        flag = false;
      }
    }
 
    if (flag){
      clearInterval(obj.timer);
      if(fn){
        fn();
      }
    }
  },15)
}
 
function getStyle(obj,attr){
  if (obj.currentStyle){
    return obj.currentStyle[attr];
  }else{
    return window.getComputedStyle(obj,null)[attr];
  }
}

在html部分引入的my.js文件部分代码

/**
 * Created by RENPINGSHENG on 2018/4/6.
 */
 
 
window.onload = function () {
  var wrap = document.getElementById("wrap");
  var slide = document.getElementById("slide");
  var ul = slide.children[0];
  var lis = ul.children;
  var arrow = document.getElementById("arrow");
  var arrRight = document.getElementById("arrRight");
  var arrLeft = document.getElementById("arrLeft");
 
  var config = [
    {
      width:400,
      top:20,
      left:50,
      opacity:0.2,
      zIndex:2
    },
    {
      width:600,
      top:70,
      left:0,
      opacity:0.8,
      zIndex:3
    },
    {
      width:800,
      top:100,
      left:200,
      opacity:1,
      zIndex:4
    },
    {
      width:600,
      top:70,
      left:600,
      opacity:0.8,
      zIndex:3
    },
    {
      width:400,
      top:20,
      left:750,
      opacity:0.2,
      zIndex:2
    }
  ];
 
  wrap.onmouseover = function () {
    animate(arrow,{"opacity":1});
  }
  wrap.onmouseout = function () {
    animate(arrow,{"opacity":0});
  }
  function assign() {
    for(var i = 0;i < lis.length;i++){
      animate(lis[i],config[i],function(){
        flag = true;
      })
    }
  }
 
  var flag = true;
  assign();
  arrRight.onclick = function () {
    flag = false;
    config.push(config.shift());
    assign();
  };
  arrLeft.onclick = function () {
    flag = false;
    config.unshift(config.pop());
    assign();
  }
}

代码完成后，用浏览器打开网页，效果如下：

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