轮播图动画实现-优快云博客

本文链接：https://blog.youkuaiyun.com/cacacacacacacaa/article/details/52729708
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //这里用于根据className获取对象
        function getByClass(className,context) {
            context = context || document;
            if(context.getElementsByClassName){
                return context.getElementsByClassName(className);
            }
            var nodes = context.getElementsByTagName('*'),ret = [];
            for (var i = 0;i < nodes.length;i++){
                if(hasClass(nodes[i],className)) ret.push(nodes[i]);
            }
            return ret;
        }

        function hasClass(node,className) {
            var names = node.className.split(/\s+/);
            for(var i = 0; i<names.length;i++){
                if(naems[i]==className) return true;
            }
            return false;
        }
        //----------上面试通用函数  不要怎么管他  知道作用就行------

        //----------让轮播动起来的动画函数------------------------
        function animate(o,start,alter,dur,fx) {                   //o 对象  start开始位置  alert最终位置  dur间隔时间数  fx效果就下面的两个函数
            var curTime = 0;
            var t = setInterval(function () {
                if(curTime>=dur) clearTimeout(t);
                for(var i in start){
                    o.style[i] = fx(start[i],alter[i],curTime,dur)+"px";
                }
                curTime+=50;
            },50);
        }

        function Linear(start,alter,curTime,dur) {
            return start+curTime/dur*alter;
        }//最简单的线性变化，即匀速运动

        function Quad(start,alert,curTime,dur) {
            return start+Math.pow(curTime/dur,2)*alert;
        }//加速运动

        window.onload = function () {
            var ul = getByClass('buttons')[0];
            var btns = ul.getElementsByTagName('li');
            var scrollContent = getByClass('scrollContent')[0];
            var cur = btns[0],t;
            for(var i = 0;i < btns.length ; i++){
                (function (i) {
                    btns[i].onmouseover = function () {
                        clearTimeout(t);
//                        scrollContent.style.top = (-i*453)+"px";   //注意  这里本来是450  但是由于多个img之间会存在3px的外边距 我暂时没有解决办法  只能这样了 不过也解决了这个问题
                        var top = parseInt(scrollContent.style.top) || 0;
                          animate(scrollContent,{top:top},{top:(-i*453)-top},500,Quad)
                        //这里的offset很重要 可以获取当前的高度  还可以获取当前的另外一些属性
                        for(var j = 0;j < btns.length;j++){
                            btns[j].className = "";
                        }
                        this.className="hover";
                        cur=this;
                    }
                    btns[i].onmouseout  = function () {
                        t = setTimeout(fn,3000);
                    }
                    btns[i].index = i;
                })(i)
            }
            //使其自动播放
            btns[0].onmouseover();
            t = setTimeout(fn,3000);
            function fn() {
                var nextindex= cur.index+1;
                if(nextindex == btns.length){
                    nextindex = 0;
                }
                btns[nextindex].onmouseover();
                t = setTimeout(fn,3000);
            }
        };


//        //-------------------上面总的来说效果实现了  但是代码太乱了  下面用面向对象的方式来写-------
//        //------------下面的代码没有实现  有点乱 有bug  累  还是直接从网上扒一个吧  自己写html和css部分  方法用网上的  原理知道了----------
//
///*buttons  [btn1,btn2 ...]  按钮数组
//scrollContent  要滚动的内容
//* */
//        function Player(buttons,scrollContent,noverClass,timeout) {
//            hoverClass = hoverClass || 'hover';  //设置默认值
//            timeout = timeout || 3000;
//            this.buttons = buttons;
//            this.scrollContent = scrollContent;
//            this.hoverClass = hoverClass;
//            this.timeout = timeout;
//
//            this.curItem = buttons[0];
//            var _this  = this;
//
//
//            for(var i = 0; i<this.buttons.length;i++){
//                this.buttons[i].onmouseover= function () {
//                    this.stop();
//                    _this.invoke(this.index);
//                };
//                this.buttons[i].onmouseout= function () {
//                    this.start();
//                };
//                this.buttons[i].index = i;
//            }
//            this.invoke(0);
//        }
//        Player.prototype={
//            start:function () {
//                var _this = this;
//
//                this.stop();
//                this.interval=setInterval(function(){
//                  _this.next();
//                },this.timeout);
//            },
//            stop:function () {
//                clearInterval(this.interval);
//            },
//            invoke:function (n) {
//                this.curItem =this.buttons[n];
////                this.curItem.index = n;
//
//                this.scrollContent.style.top = -n*453+"px";
//                this.recoverButtonClass();
//                this.curItem.className = this.hoverClass;
//            },
//            next:function () {
//               var nextIndex =  this.curItem.index+1;
//                if(nextIndex>=this.buttons.length){
//                    nextIndex = 0;
//                }
//                this.invoke(nextIndex);
//            },
//            recoverButtonClass:function () {
//                for (var i = 0 ;i<this.buttons.length;i++){
//                    this.buttons[i].className = '';
//                }
//            }
//
//        };
//
//        window.onload = function () {
//            var btns = getByClass('buttons')[0].getElementsByTagName('li');
//            var scrollContent = getByClass('scrollContent')[0];
//            var player = new Player(btns,scrollContent,);
//            player.start();  //开始播放
//            play.invoke(3);   //切换到第三帧
//            player.stop();  //停止轮播
//        }
    </script>
    <style>
        .scrollContent{
            width: 800px;
            height: 2250px;
            position:absolute ;
            top: 0px;
            left: 0px;
        }
        .scrollFrame{           	width: 800px;
	height: 450px;
	overflow: hidden;
	position: relative;
        }        .scrollFrame .buttons{            height: 20px;            position: absolute;            right: 10px;            bottom: 0px;        }        .scrollFrame .buttons li{            display: block;            float: left;            width: 20px;            height:20px;            border:1px solid orange;            text-align: center;            cursor: pointer;           //把鼠标的箭头改成小手            color: orange;            background: white;            line-height: 20px;            margin: 2px;        }        .scrollFrame .buttons li.hover{            width: 24px;            height: 24px;            background-color: orange;            color: white;        }    </style></head><body>    <div class="scrollFrame">        <div class="scrollContent">            <img src="lunboimg/1.jpg">            <img src="lunboimg/2.jpg">            <img src="lunboimg/3.jpg">            <img src="lunboimg/4.jpg">            <img src="lunboimg/5.jpg">        </div>        <ul class="buttons">            <li>1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>        </ul>    </div></body></html>
轮播的难主要实现在他那个方法上