<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery.transform</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="mainbox">

        <ul>

            <li><img src="1.jpg" alt=""></li>

            <li><img src="2.jpg" alt=""></li>

            <li><img src="3.jpg" alt=""></li>

            <li><img src="4.jpg" alt=""></li>

            <div class="clear"></div>

        </ul>

        <div class="btnbox">

            <a class="leftbt">&lt</a>

            <a class="rightbt">&gt</a>

            <a class="topbt">play</a>

        </div>

        <h2>多图旋转轮播效果</h2>

    </div>

</body>

<script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>

<script src="jquery.transform-0.9.3.min_.js"></script>

<script src="index.js"></script>

</html>
*{

    margin:;

    padding:;

    list-style: none;

}

a{

    text-decoration: none;

}

.mainbox {

    width: 1000px;

    height: 515px;

    margin: 0 auto;

    box-shadow: 0px 0px 5px #000;

    margin-top: 200px;

    overflow: hidden;

    position: relative;

}

.mainbox h2{

    position: absolute;

    bottom: 20px;

    right: 50px;

    background: rgba(255,255,255,0.6);

    padding: 10px;

    letter-spacing: 0.6em;

}

.mainbox .btnbox a{

    position: absolute;

    display: block;

    opacity: 0.6;

    cursor: pointer;

}

.mainbox .btnbox a:hover{

    opacity:;

}

.mainbox .btnbox .leftbt{

    left: 20px;

    top: 50%;

    color: #fff;

    font-size: 60px;

    margin-top: -30px;

}

.mainbox .btnbox .rightbt{

    right: 20px;

    top: 50%;

    color: #fff;

    font-size: 60px;

    margin-top: -30px;

}

.mainbox .btnbox .topbt{

    top: 0px;

    left: 20px;

    color: #000;

    font-size: 10px;

    border: 1px solid #999;

    padding: 5px;

}

.mainbox ul li{

    float: left;

    width: 25%;

    height: 465px;

    overflow: hidden;

    border: 25px solid #fff;

    margin-left: -50px;

    position: relative;

}

.mainbox ul li img{

    position: absolute;

    width: 310px;

    height: 465px;

}

.clear{

    clear: both;

}
var loopPlayerInit = (function(){

    var $leftbt = null,

        $rightbt = null,

        $topbt = null,

        $imglist = null,

        origin = ['125px','500px'],

        imgOrign = ['180px','900px'],

        imgAll = createImg([['1.jpg','2.jpg','3.jpg','4.jpg'],['5.jpg','6.jpg','7.jpg','8.jpg'],['9.jpg','10.jpg','11.jpg','12.jpg'],['13.jpg','14.jpg','15.jpg','16.jpg']]),

        imgArrIndex=0,

        imgAng = 45,

        imgTime = 100,//初始时间

        rotating = false,//初始旋转状态

        autoTime = null,//存储定时器

        autoInterval = 3000;//自动播放时间间隔

    function init(){

        $leftbt = $(".leftbt"),

        $rightbt = $(".rightbt"),

        $topbt = $(".topbt"),

        $imglist = $(".mainbox ul li");

        configer();//旋转角度和旋转点

        setEvent();//添加事件

    }

    function configer(){//旋转角度和旋转点

        var ang = 6,

            aint = -6;

        $imglist.transform({origin:origin});

        $imglist.each(function(i){

            var $this = $(this);

            $this.transform({rotate:aint + (i*ang) + "deg"});

        })

    }

    function setEvent(){//添加事件

        $leftbt.bind("click",function(){

            //alert(imgAll[imgArrIndex][i])

            anigo(-1);//旋转函数

            return false;

        });

        $rightbt.bind("click",function(){

            anigo(1);

            return false;

        });

        $topbt.bind("click",function(){

            var play = "play",

                pause = "pause",

                $but = $(this);

            if($but.text()=="play"){

                $but.text(pause);

                autoGo();

            }else{

                $but.text(play);

                autoStop();

            }

            return false;

        });

    }

    function createImg(arr){//生成图片

        var imgArr = [];

        for(var i in arr){

            imgArr[i] = [];

            for(var j in arr[i]){

                imgArr[i][j] = new Image();

                imgArr[i][j].src = arr[i][j];

            }

        }

        return imgArr;

    }

    function anigo(d){

        if(rotating) return false;//若动画在执行直接return

        rotating = true;

        imgArrIndex+=d;

        if(imgArrIndex>imgAll.length-1){

            imgArrIndex = 0;

        }else if (imgArrIndex<0) {

            imgArrIndex = imgAll.length-1;

        };

        $imglist.each(function(i){

            var $thisItem = $(this);//遍历出的li

            var $thisimg = $thisItem.children("img");//li 下面原始img

            var $targetImg=$(imgAll[imgArrIndex][i]);//取出图片

            var thisTime=(d===1)?imgTime*i:imgTime*($imglist.length-1-i);//往右转i=3的延迟时间最长，往左转i=0的延迟时间最长；

            $thisItem.append($targetImg);//替换图片

            $thisimg.transform({origin:imgOrign});

            $targetImg.transform({origin:imgOrign,rotate:(0-d)*imgAng + "deg"});

            setTimeout(function() {

                $thisimg.animate({rotate:imgAng*d + "deg"});

                $targetImg.animate({rotate:"0deg"},500,function(){

                    $thisimg.remove();

                    if(thisTime==(($imglist.length-1)*imgTime)){

                        rotating = false;

                    }

                });

            },thisTime)

        })

    }

    function autoGo(){

        clearInterval(autoTime);

        anigo(1);

        autoTime = setInterval(function(){

            anigo(1);

        },autoInterval)

    }

    function autoStop(){

        clearInterval(autoTime)

    }

    return init;

})()

loopPlayerInit();

jquery.transform的更多相关文章

  1. jQuery箭头切换图片 - 学习笔记

    jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z):        x 代表横向坐标移向量的长度       y 代表纵向坐标移 ...

  2. JS+CSS3人物奔跑动画

    查看效果:http://hovertree.com/texiao/jquery/58/ 效果图: 代码: <!DOCTYPE html> <html> <head> ...

  3. Minimit Anima – 硬件加速的 CSS3 动画插件

    Minimit Anima 是一个实现 CSS3 Transforms 和 Transitions 动画的 jQuery 插件.基于硬件加速的 CSS3 动画执行更快,而且它有一个类似于 jQuery ...

  4. 元素水平垂直居中（transform，margin，table-cell，jQuery）

    1.水平居中 .div{ margin:0 auto; (或者 margin:auto;) width:500px; height:300px; } 2.使用margin水平垂直居中 方式一: .di ...

  5. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  6. jquery 设置 transform/translate 获取 transform/translate 的值

    //获取 transform 值 var reg=/matrix.(((-)?([0-9]+.)?\d+([, ]+)?){6})./g; var str= progressUI.css(" ...

  7. jquery获取transform里面的值

    用transform的translateX写了一个侧滑效果,如何获取它改变的值是多少呢? 获取translateX值的方法: $('div').css("transform").r ...

  8. jquery 的animate 的transform

    $(function(){ var t = 1000; $("#id").animate( {borderSpacing:180}, //180 指旋转度数 { step: fun ...

  9. jquery 获取css3 transform 值

    最近写了个旋转,有要求获取transform值.当看到console.log($("#id").css("transform"))的值的时候,我的内心是崩溃的 ...

随机推荐

  1. day23-python之日志 re模块

    1.logging import logging #-----------------------------------logging.basicConfig logging.basicConfig ...

  2. 2018年湘潭大学程序设计竞赛 E 吃货

    题目描述 作为一个标准的吃货,mostshy又打算去联建商业街觅食了.混迹于商业街已久,mostshy已经知道了商业街的所有美食与其价格,而且他给每种美食都赋予了一个美味度,美味度越高表示他越喜爱这种 ...

  3. Linux 用户行为日志记录

    工作中我们常常遇到,有的员工不安于被分配的权限,老是想sudo echo "ziji" /usr/bin/visudo NOPASSWD:ALL来进行提权,造成误删了数据库某条重要 ...

  4. 快速排序算法（C）

    sort快排函数的基本版,效率n*logn,快排的完全版就是在递归之中夹杂对序列的预判断,最优的选择排序方法,快速排序算法只是其中之一. 简单的说明一下快速排序的思想,对于一个数列,首先选择一个基数( ...

  5. bash shell命令与监测的那点事（三）

    bash shell命令与监测的那点事之df与du 前两篇介绍了bash shell的进程监控指令,但是有时候你需要知道在某个设备上还有多少磁盘空间.首先介绍df命令: df命令 df命令就是用来轻松 ...

  6. 【SCOI 2010】股票交易

    题目 最近 \(\text{lxhgww}\) 又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,\(\text{lxhgww}\) 预测到了未来 \(T ...

  7. Mybatis使用-Error attempting to get column 'type' from result set. / '255' in column '4' is outside valid range for the datatype TINYINT.

    一.遇到的问题是这样的: [RemoteTestNG] detected TestNG version 6.9.10log4j: Parsing for [root] with value=[DEBU ...

  8. RSA进阶之共模攻击

    适用场景: 同一个n,对相同的m进行了加密,e取值不一样. e1和e2互质,gcd(e1,e2)=1 如果满足上述条件,那么就可以在不分解n的情况下求解m 原理 复杂的东西简单说: 如果gcd(e1, ...

  9. caffe的python接口提取resnet101某层特征

    论文的caffemodel转化为tensorflow模型过程中越坑无数,最后索性直接用caffe提特征. caffe提取倒数第二层,pool5的输出,fc1000层的输入,2048维的特征 #codi ...

  10. 菜鸟之路——机器学习之HierarchicalClustering层次分析及个人理解

    这个算法.我个人感觉有点鸡肋.最终的表达也不是特别清楚. 原理很简单,从所有的样本中选取Euclidean distance最近的两个样本,归为一类,取其平均值组成一个新样本,总样本数少1:不断的重复 ...