左右轮播图

<style>
        .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(imgs/prev.png) no-repeat;
            z-index: 99;
        }
        .next{
            right:0;
            background-image: url(imgs/next.png);
        }
    </style>
    <script src="../DOM/commer.js"></script>
    <script>
        //计算后的样式属性---- 一个元素的任意的一个样式属性值
        function getStyle(element,attr) {
            //判断这个浏览器是否支持这个方法
            return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
        }
        //匀速动画
        function animate(element,json,fn) {  //element--元素   attr--属性名字   target--目标位置
            //清理定时器
            clearInterval(element.timeId);
            element.timeId=setInterval(function () {
                var flag=true;//默认，假设，全部到达目标
                for(var attr in json){
                    //判断这个属性中attr中是不是opacity
                    if (attr=="opacity"){
                        //获取元素的当前的透明度，当前的透明度放大100倍
                        var current=getStyle(element,attr)*100;
                        //目标的透明度放大100倍
                        var target=json[attr]*100;
                        var step=(target-current)/10;
                        step=step>0?Math.ceil(step):Math.floor(step);
                        current+=step;
                        element.style[attr]=current/100;
                    }else if(attr=="zIndex"){   //判断这个属性attr中是不是zIndex
                        //层级改变就是直接改变这个属性的值
                        element.style[attr]=json[attr];
                    }else {
                        //获取元素当前位置
                        var current=parseInt(getStyle(element,attr));//数字类型
                        //当前的属性对应的目标值
                        var target=json[attr];
                        //移动的步数
                        var step=(target-current)/10;
                        step=step>0?Math.ceil(step):Math.floor(step);
                        current+=step;
                        element.style[attr]=current+"px";
                    }
                    //判断是否到达目标
                    if(current!=target){
                        flag=false;
                    }
                }
                if(flag){
                    //清理计时器
                    clearInterval(element.timeId);
                    //回调函数,所有属性达到目标后才能使用
                    if(fn){
                        fn();
                    }
                }
                //测试代码
                console.log("目标位置:"+target+",当前位置:"+current+",每次移动的步数:"+step)
            },20);
        }

        var config = [
            {
                width: 400,
                top: 20,
                left: 50,
                opacity: 0.2,
                zIndex: 2
            },//0
            {
                width: 600,
                top: 70,
                left: 0,
                opacity: 0.8,
                zIndex: 3
            },//1
            {
                width: 800,
                top: 100,
                left: 200,
                opacity: 1,
                zIndex: 4
            },//2
            {
                width: 600,
                top: 70,
                left: 600,
                opacity: 0.8,
                zIndex: 3
            },//3
            {
                width: 400,
                top: 20,
                left: 750,
                opacity: 0.2,
                zIndex: 2
            }//4

        ];

        //页面加载事件
        window.οnlοad=function () {
            var flag=true;
            var list=ver("slide").getElementsByTagName("li");

            //图片散开
            function assign() {
                for(var i=0;i<list.length;i++){
                    //设置每个li，都要把宽、高、透明度、left、top到指定的目标位置
                    animate(list[i],config[i],function () {
                        flag=true;
                    });
                }
            }
          assign();

            //右边按钮
            ver("arrRight").οnclick=function () {
                if(flag){
                    flag=false;
                    config.push(config.shift());
                    assign();//重新分配
                }
            };
            ver("arrLeft").οnclick=function () {
                if(flag){
                    flag=false;
                    config.unshift(config.pop());
                    assign();
                }
            };

            //鼠标进入
            ver("wrap").οnmοuseοver=function () {
                animate(ver("arrow"),{"opacity":1});
            };
            //鼠标离开
            ver("wrap").οnmοuseοut=function () {
                animate(ver("arrow"),{"opacity":0});
            };
        }
    </script>
</head>
<body>
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="imgs/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="imgs/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="imgs/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="imgs/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="imgs/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>

转载于:https://www.cnblogs.com/lujieting/p/10058491.html