<!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. （80）zabbix性能优化中的几个建议

    随着zabbix的广泛应用,少数人的zabbix服务器在性能上出现瓶颈,或者在未来会出现性能方面的瓶颈,接下来讨论几个有效并且简单的优化方案. 服务器硬件 想通过几个简单的配置让服务器提高成倍的性能, ...

  2. Java代码随机生成图片验证码

    package com.rchm.util.images; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2 ...

  3. 破解studio 3T

    方法一: 打开注册表:regedit 计算机\HKEY_CURRENT_USER\Software\JavaSoft\Prefs\3t\mongochef\enterprise 将里面得数据清零,又是 ...

  4. 初识redis-cluster

    安装redis [root@localhost ~]# cd /datas/soft/ [root@localhost soft]# ll redis-.tar.gz // 已经下载的最新版 -rwx ...

  5. Django框架基础知识01-配置环境

    Django框架 Django是个怎样的东西呢? Web应用框架----Django  http服务器:用来接受用户请求,并将请求转发给web应用框架进行处理. Web应用框架处理完以后再发送给htt ...

  6. 模块numpy的用法

    https://blog.csdn.net/qq351469076/article/details/78817378 机器学习三剑客之Numpy: https://www.jianshu.com/p/ ...

  7. Android 有些机型hint不显示

    这个问题就是有些手机型号,hint字体正好和你的背景色一样,不如你的背景色是白色, 因为大多数的系统,hint都是灰色,所以可以显示,有些手机他妈的就是hint默认字体是白色,结果显示不出来. 那么就 ...

  8. Django补充知识点——用户管理

    内容概要 1.Form表单2.Ajax3.布局,Django母板4.序列化5.Ajax相关6.分页7.XSS攻击8.CSRF9.CBV.FBV 10.类中用装饰器的两种方法 11.上传文件 12.数据 ...

  9. error LNK2001: unresolved external symbol ___CxxFrameHandler3

    Q:  VS2005编译的静态库, 在vc++6.0中连接出现错误 error LNK2001: unresolved external symbol ___CxxFrameHandler3 A:   ...

  10. WampServer配置说明

    注意:所有的修改操作都要重启WampServer服务器,部分需要重启WampServer软件 1.修改默认端口 1)打开文件:C:\wamp\bin\apache\apache2.4.9\conf\h ...