轮播

来源：互联网发布：2016科幻电影推荐知乎编辑：程序博客网时间：2024/04/30 08:57
<!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>
轮播的难主要实现在他那个方法上
0 0