<!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. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  2. Vue2+webpack+node 配置+入门+详解

    Vue2介绍 1.vue2.0 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层 采用单文件组件 复杂大型单页应用程序(SPA) 响 ...

  3. OpenFaceswap 入门教程（2）：软件使用篇！

    安装完OpenFaceswap之后,是不是就迫不及待的想要“见证奇迹”了呢? 都说磨刀不误砍柴工.开始之前请先做一个准备.然后大致了解一下换脸的过程 换脸基本步骤是: 把视频切成很多图片 把图片中的人 ...

  4. Java中的接口和抽象类（转）

    在面向对象的概念中,我们知道所有的对象都是通过类来描述的,但是并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类往往用来表征我们在对问题 ...

  5. Sliding Window POJ - 2823

    Description An array of size n ≤ 106 is given to you. There is a sliding window of size k which is m ...

  6. java十分钟速懂知识点——System类

    上次面试中遇到的一个问题,问到System.out.println()中的out是不是内部类,当时就给问蒙了,直观感觉out应该是System类的一个属性,跟内部类有什么关系?而且之前整理IO部分的时 ...

  7. Spring---环境搭建与包介绍

    jar包下载路径 首先需要下载Spring框架 spring-framework-5.0.0.RELEASE-dist,官方地址为https://repo.spring.io/release/org/ ...

  8. cakephp 中Console / Shell 有什么优点?

    Which is the advantage of using CakePHP Console / Shell for programmed tasks ? 查看原文 最近用到了cakephp中的sh ...

  9. leetcode 【 Search in Rotated Sorted Array 】python 实现

    题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7  ...

  10. c语言入门-02-第一个c程序开始

    我们来开我们第一个c代码 #include<stdio.h> int main(){ // print num int num; num = 1; printf("%d\n&qu ...