<!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. python用requests请求，报SSL:CERTIFICATE_VERIFY_FAILED错误。

    response = requests.request("GET", url, headers=headers, params=querystring, verify=False) ...

  2. 关于poi的坑

    背景故事 今天遇上一个坑,关于poi公式计算结果出错的问题,自己打断点debug了半天,虽然没彻底搞清楚为啥不行,但所幸找到了解决办法. 干货 下面不废话,直接贴干货,原先的公式处理代码如下: fin ...

  3. 数据结构-单链表(Linked List)

    #include <stdio.h> #include <stdlib.h> #define LIST_INIT_SIZE 10 #define LISTINCREMENT 1 ...

  4. HDU - 6514 Monitor（二维差分）

    题意 给定一个\(n×m\)的矩阵.(\(n×m <= 1e7\)). \(p\)次操作,每次可以在这个矩阵中覆盖一个矩形. \(q\)次询问,每次问一个矩形区域中,是否所有的点都被覆盖. 解析 ...

  5. The 2016 ACM-ICPC Asia Shenyang Regional Contest

    A. Thickest Burger 大数 × 2 + 小数 #include <cstdio> #include <algorithm> using namespace st ...

  6. Codeforces Round #456 (Div. 2) A. Tricky Alchemy

    传送门:http://codeforces.com/contest/912/problem/A A. Tricky Alchemy time limit per test1 second memory ...

  7. [BZOJ3312][USACO]不找零(状压DP)

    Description 约翰带着 N 头奶牛在超市买东西,现在他们正在排队付钱,排在第 i 个位置的奶牛需要支付 Ci元.今天说好所有东西都是约翰请客的,但直到付账的时候,约翰才意识到自己没带钱,身上 ...

  8. python之随机数random模块

    random模块:用于生成随机数 import random #random模块:用于生成随机数 li = [] for i in range(7): r = random.randrange(0,3 ...

  9. 关于mybatis 一级缓存引发的问题

    场景: 由于在一个方法中存在多个不同业务操作 private void insertOrUpdateField(CompanyReport entity) { //计算并数据 calcReportDa ...

  10. Python框架之Django学习笔记（十五）

    表单 从Google的简朴的单个搜索框,到常见的Blog评论提交表单,再到复杂的自定义数据输入接口,HTML表单一直是交互性网站的支柱.本次内容将介绍如何用Django对用户通过表单提交的数据进行访问 ...