js原生代码属性旋转木马案例

最新推荐文章于 2023-10-04 17:09:17 发布

ヽ错落不堪的年华。

最新推荐文章于 2023-10-04 17:09:17 发布

阅读量359

点赞数 1

分类专栏：技术交流前端小功能技术总结文章标签：旋转木马 js 前端开发

本文链接：https://blog.csdn.net/qq_44777678/article/details/90077437

版权

技术交流同时被 3 个专栏收录

107 篇文章 2 订阅

订阅专栏

技术总结

103 篇文章 0 订阅

订阅专栏

前端

97 篇文章 0 订阅

订阅专栏

html和js部分

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>旋转木马轮播图</title>
  <link rel="stylesheet" href="css/css.css"/>
</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>
<script>
  //根据id获取对应的元素
function my$(id) {
    return document.getElementById(id);
}
/*
* element---任意的元素
* attr---属性
* */
function getAttrValue(element,attr) {
    return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0;
}
//终极版本的动画函数---有bug
function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        var flag=true;//假设都达到了目标
        for(var attr in json){
            if(attr=="opacity"){//判断属性是不是opacity
                var current= getAttrValue(element,attr)*100;
                //每次移动多少步
                var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current/100;
            }else if(attr=="zIndex"){//判断属性是不是zIndex
                element.style[attr]=json[attr];
            }else{//普通的属性

                //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
                var current= parseInt(getAttrValue(element,attr))||0;
                //每次移动多少步
                var target=json[attr];//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current+"px";
            }
            if(current!=target){
                flag=false;//如果没到目标结果就为false
            }
        }
        if(flag){//结果为true
            clearInterval(element.timeId);
            if(fn){//如果用户传入了回调的函数
                fn(); //就直接的调用,
            }
        }
        // console.log("target:"+target+"current:"+current+"step:"+step);
    },10);
}

//ul里面的li位置数组
  var config = [
    {
      width: 400,
      top: 70,
      left: 50,
      opacity: 0.2,
      zIndex: 2
    },//0
    {
      width: 600,
      top: 70,
      left: 0,
      opacity: 1,
      zIndex: 3
    },//1
    {
      width: 750,
      top: 25,
      left: 225,
      opacity: 1,
      zIndex: 4
    },//2
    {
      width: 600,
      top: 70,
      left: 600,
      opacity: 1,
      zIndex: 3
    },//3
    {
      width: 400,
      top: 70,
      left: 750,
      opacity: 0.2,
      zIndex: 2
    }//4
  ];

  // 页面加载事件
  window.onload = function() {
    
    //防止用户点击的太快出Bug---假设所有的动画执行完毕了---锁
    var flag = true;

    // 图片散开 先获取ul里的li
      var list = my$("slide").getElementsByTagName("li");
      // 设置分配代码
      function assign() {
           // 循环遍历li
          for(var i=0;i<list.length;i++ ) {
              // 添加动画散开时间
              animate(list[i],config[i],function(){
                // 回调函数
                // 所有的代码都执行完了
                flag = true;
              });
          }
      };
      //分配代码拿出来
      assign();

      // 鼠标进入显示
      my$("slide").onmouseover = function(){
        animate(my$("arrow"),{"opacity":1});
      };
      // 鼠标进入隐藏
      my$("slide").onmouseout = function(){
        animate(my$("arrow"),{"opacity":0});
      };
 
      // 点击右按钮
      my$("arrRight").onclick = AutomaticClick;
      function AutomaticClick() {
        // 判断执行完没
        if(flag) {
            // 执行完了锁上
            flag = false;
            config.push(config.shift());
            //分配代码
            assign();
        }
      }

      // 点击左按钮
      my$("arrLeft").onclick = function() {
            // 判断执行完没
            if(flag) {
            // 执行完了锁上
            flag = false;
            config.unshift(config.pop());
            //分配代码
            assign();
          }   
      };
  };
</script>
</body>
</html>

css部分

/*初始化  reset*/
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; 
}
.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);
}

ヽ错落不堪的年华。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js原生代码属性旋转木马案例

html和js部分<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css.css"/></head&gt...
复制链接

扫一扫