欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现旋转木马轮播图

程序员文章站 2022-07-02 19:35:09
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下 整个页面的文件结构如下图所示: html部分代码:

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

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

js实现旋转木马轮播图

html部分代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>旋转木马轮播图</title>
  <link rel="stylesheet" href="css/mystyle.css" rel="external nofollow" />
  <script type="text/javascript" src="js/animate.js"></script>
  <script type="text/javascript" src="js/my.js"></script>
</head>
<body>
<div class="wrap" id="wrap">
  <div class="slide" id="slide">
    <ul>
      <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
    </ul>
    <div class="arrow" id="arrow">
      <a href="javascript:;" class="prev" id="arrleft"></a>
      <a href="javascript:;" class="next" id="arrright"></a>
    </div>
  </div>
</div>
</body>
</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();
  }
}

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

js实现旋转木马轮播图

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