- $(function () {
- /*1. 设置索引
- * 2. 给左右按钮注册点击事件
- * 3. 沿 x 轴旋转
- * 4. 节流阀控制动画完成下一次动画才可以开始 */
- // 先关闭一次定时器, 以为默认鼠标在 box 元素外, 不关闭则开启了两个定时器
- clearInterval(timeId);
- var index = 0;
- var flag=true;
- $('.left').on('click', function () {
- if(!flag) return;
- flag=false;
- index--;
- var angel = -index * 90;
- $('li').CSS('transform', 'rotateX(' + angel + 'deg)').each(function (i, item) {
- $(this).CSS('transition-delay',i*0.25+"s");
- })
- });
- $('.right').on('click', function () {
- if(!flag) return;
- flag=false;
- index++;
- var angel = -index * 90;
- $('li').CSS('transform', 'rotateX(' + angel + 'deg)').each(function (i, item) {
- $(this).CSS('transition-delay',i*0.25+"s");
- })
- });
- // 做过渡完成后时间判断
- $('.imageBox li:last').on('transitionend',function () {
- flag=true;
- });
- // 定时播放
- var timeId=setInterval(function(){
- $('.box .right').trigger('click');
- },2000);
- // 当鼠标进入 box 容器, 停止定时器
- $('.box').on('mouseenter',function(){
- clearInterval(timeId);
- })
- // 当鼠标离开 box 容器, 开启定时器
- $('.box').on('mouseleave',function(){
- timeId=setInterval(function(){
- $('.box .right').trigger('click');
- },3000);
- })
来源: http://www.bubuko.com/infodetail-2791090.html