3D轮播

最新推荐文章于 2022-08-05 13:44:31 发布

诸葛苍穹

最新推荐文章于 2022-08-05 13:44:31 发布

阅读量341

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/u012260672/article/details/50286161

版权

html5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
3D轮播

<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"/> <style type="text/css"> body{ margin: 0; padding: 0; } .main{
复制链接

扫一扫