<!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知识点入门笔记——特色数据类型(列表)

    Python中提供了列表这种数据类型(类型为list)来存储多个值构成的序列 用逗号将不同数据分隔开,整体放在一个方括号[]里就创建了列表 列表中的数据类型可以是相同的,也可以是不同的 列表中还可以嵌 ...

  2. UVA：11297-Census（二维线段树）

    Census Time Limit: 8 sec Description This year, there have been many problems with population calcul ...

  3. data相关应用

    文案参考:HTML5中的data-*属性和jQuery中的.data()方法使用 data属性选择器 $("li[data-id='1']")//选择li元素中data-id属性等 ...

  4. 小知识（h5 js ）

    1.如果都为NaN但是他们不相等var a=NaN;var b=NaN;a==b //flase2.javascript 是一种脚本语言,可以创建服务器端和客户端的脚本3.javascript 中有两 ...

  5. github 上传项目

    注册账户以及创建仓库 要想使用github第一步当然是注册github账号了.之后就可以创建仓库了(免费用户只能建公共仓库),Create a New Repository,填好名称后Create,之 ...

  6. Python人工智能-基于百度AI接口

    参考百度AI官网:http://ai.baidu.com/ 准备工作: 支持Python版本:2.7.+ ,3.+ 安装使用Python SDK有如下方式 >如果已经安装了pip,执行 pip ...

  7. [DM8168]Linux下控制GPIO控制12864液晶屏（ST7565控制器）

    首先加载驱动模块,应用程序通过调用API实现GPIO控制功能. 驱动函数: /* * fileName: st7565_driver.c * just for LCD12864 driver * GP ...

  8. 动态生成的chosen实现模糊查询

    $('select', newTr).chosen({ width: '100%', search_contains: true }); //初始化复制行下拉框

  9. mysql导入导出命令详解

    mysql导入导出命令详解 该命令适用于临时备份操作. 一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径): /usr/local/mysql/bin/  ---> ...

  10. 抓取js动态生成数据

    最近在抓数据,一般的网页数据抓取相对容易一些,今天在抓电视猫的节目单,发现有些数据时抓取不到的,Java端得到的HTML文件里面没有某一段代码,查了很多资料,发现说是js动态生成的数据,无法直接抓取, ...