当前位置：首页> 正文

原生js实现旋转木马效果

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

html部分

<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href=""><img src="images/slidepic1.webp" alt=""></a></li>
            <li><a href=""><img src="images/slidepic2.webp" alt=""></a></li>
            <li><a href=""><img src="images/slidepic3.webp" alt=""></a></li>
            <li><a href=""><img src="images/slidepic4.webp" alt=""></a></li>
            <li><a href=""><img src="images/slidepic5.webp" alt=""></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:" id="next"></a>
            <a href="javascript:" id="prev"></a>
        </div>
    </div>
</div>

css部分

@charset "UTF-8";
/*初始化  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 {
    margin: 100px auto;
    width: 1200px;
}
.slide {
    height: 500px;
    position: relative;
}
.slide li {
    position: absolute;
    left: 200px;
    top: 0;
}
.slide li img {
    width: 100%;
}
.arrow {
    opacity: 0;
}
#next,#prev {
    width: 76px;
    height: 112px;
    position: absolute;
    top: 50%;
    margin-top: -56px;
    background: url("../images/prev.webp") no-repeat;
    z-index: 99;
}
#next {
    background-image: url("../images/next.webp");
    right: 0;
}

js部分

<script src="common.js"></script>
    <script>
        var config = [
            {
                width: 400,
                opacity: 0.2,
                height: 250,
                left: 50,
                top: 20,
                zIndex: 2
            },//0
            {
                width: 600,
                opacity: 0.7,
                height: 350,
                left: 0,
                top: 70,
                zIndex: 3
            },//1
            {
                width: 800,
                opacity: 1,
                height: 500,
                left: 200,
                top: 100,
                zIndex: 4
            },//2
            {
                width: 600,
                opacity: 0.7,
                height: 350,
                left: 600,
                top: 70,
                zIndex: 3
            },//3
            {
                width: 400,
                opacity: 0.2,
                height: 250,
                left: 750,
                top: 20,
                zIndex: 2
            }//4
        ];
        //页面加载事件
        window.onload = function () {
            var flag=true;//默认所有的动画都结束了
            //获取li标签
            var list = my$("slide").getElementsByTagName("li");
            //散开图片
            function assign() {
                for (var i = 0; i < list.length; i++) {
                    animate(list[i], config[i],function () {
                        flag=true;//回调函数，当动画加载完后，flag变为true
                    });
                }
            }
            assign();
            //点击右边焦点
            my$("next").onclick = function () {
                if (flag){
                    flag=false;
                    config.push(config.shift());//把数组中的第一个元素作为返回值并追加加到这个数组的最后面
                    assign();
                }
            };
            //点击左边焦点
            my$("prev").onclick = function () {
                if (flag){
                    flag=false;
                    config.unshift(config.pop());//把数组的最后一个元素作为返回值并追加到这个数组的最前面
                    assign();
                }
            };
            //鼠标进入逐渐的显示左右焦点
            my$("slide").onmouseover=function () {
               animate(my$("arrow"),{"opacity":1});
            };
            //鼠标离开隐藏
            my$("slide").onmouseout = function () {
                animate(my$("arrow"),{"opacity":0});
            };
        };
</script>

common.js部分

//根据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;
}
//动画函数
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);
}

展开全文阅读