3D轮播

来源：互联网发布：淘宝店卖什么利润高编辑：程序博客网时间：2024/05/01 23:52
<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8"/>    <style type="text/css">        body{            margin: 0;            padding: 0;        }        .main{            width: 100%;            background-color: #333;            height: 400px;            position: relative;            top: 0;            left: 0;        }        .main div{            position: absolute;            width: 300px;        }    </style></head><body><div class="main">    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div></div><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">    // div  坐标    var posi = [{height:'300px',left:400,top:50,zIndex:3,opacity:1,backgroundColor:"#9cf"},        {height:'200px',left:600,top:100,opacity:0.5,zIndex:2,backgroundColor:"#fc9"},        {height:'100px',left:700,top:150,opacity:0.3,zIndex:1,backgroundColor:"#9FC"},        {height:'100px',left:100,top:150,opacity:0.3,zIndex:1,backgroundColor:"#cf9"},        {height:'200px',left:200,top:100,opacity:0.5,zIndex:2,backgroundColor:"#c9f"}];    function init(){        // 获得所有的div 对象进行初始        $('.main div').each(function(i,n){            //  附加默认的css  样式             $(n).css(posi[i]);             console.log(n);            // 给每一个添加点击事件                 $(n).on('click',function(){                    console.log($(n));                     //  获得所有的 需要移动div  ,用来建立循环的数据结构                     var temp = new loopinfo($('.main div'));                      // 获得下一个节点对象                    //  设置每一个 div  的动画                     var temp1 = this;                    for(var i=0;i<5;i++){                        $(temp1).animate(posi[i],1000);                        temp1 = temp.nextnode(temp1);                        console.log(temp1);                    }                 });        });    }    init();        function loopinfo(arr){          this.temploop = arr;        }        loopinfo.prototype.nextnode=function(cur){             // 判断cur 在  原始数组的位置（下标）            var templen = this.temploop.length;            for(var i = 0;i<templen ;i++){                if(this.temploop[i] === cur){                    if(i==(templen-1)){                        return this.temploop[0];                    }                    return this.temploop[i+1];                }            }        }//    //  测试//    var temparray = [0,1,5,9,22];;//////   var tempnumvar =  temp.nextnode(0);//    console.log(tempnumvar);</script></body></html>
0 0