为了账号安全,请及时绑定邮箱和手机立即绑定

正在回答

2 回答

谢谢 @share_one

0 回复 有任何疑惑可以回复我~
// JavaScript Document
var loopPlayInit=(function(){
	var $butLeft = null,
		$butRight = null,
		$butPlay = null,
		$imglist = null,   //定义null,保护
		origin=['125px','700px'],
		imgOrigin=['125px','800px'],
		imgAll = createImg([['images/p1.jpg','images/p2.jpg','images/p3.jpg','images/p4.jpg'],['images/p5.jpg','images/p6.jpg','images/p7.jpg','images/p8.jpg'],['images/p9.jpg','images/p10.jpg','images/p11.jpg','images/p12.jpg']]),
		imgArrIndex = 0,
		imgAng = 45,
		imgTime = 300,
		rotating = false,    //控制当前动画的动画状态
		autoTimer = null,         //定时器
		autointerval = 3000;      //定时器间隔时间
		
	function init(){
		$butLeft = $(".butLeft");
		$butRight = $(".butRight");
		$butPlay = $(".butPlay");
		$imglist = $(".mainbox ul li");
		
		configer();    //调用configer函数
		setEvent();
	}
	function configer(){
		var ang = 5,
		aint = -5;
		$imglist.transform({origin:origin});
		$imglist.each(function(i){
			var $this = $(this);   //this是循环遍历出来的每一个当前元素
			$this.transform({rotate:aint+(i*ang)+"deg"});
		})	
	}
	
	
	function setEvent(){
	    $butLeft.bind("click",function(){
			anigo(-1);
			return false;   //返回空,不跳转
		});	
		$butRight.bind("click",function(){
			anigo(1);
			return false;
		});	
		$butPlay.bind("click",function(){
			var play = "play",
			    pause = "pause",
				$but = $(this);
			if($but.text() == "play")
			{
				$but.text(pause);
				autoGo();
			}else{
				$but.text(play);
				autoShop();
			}
			return false;
		});	
		
	}
	
	function createImg(arr){
		var imgArr = [];
		for(var i in arr){
		    imgArr[i] = [];
			for(var x in arr[i]){
			    imgArr[i][x] = new Image();   //将数组索引转化为图片对象
				imgArr[i][x].src = arr[i][x];
			}
		}
	    return imgArr;	
	}
	
	function anigo(d){
		if(rotating) return false;    //return直接跳出函数
		rotating = true;    //true:动画在执行
		 
	    imgArrIndex += d;
		console.log(imgAll.length);
		
		if(imgArrIndex > imgAll.length-1){
		    imgArrIndex = 0;
		}
		else if(imgArrIndex < 0){
			imgArrIndex = imgAll.length-1;
		}	
		
		$imglist.each(function(i){
		    var $thisItme = $(this);
			var $thisimg = $thisItme.children("img");   //当前存在的图片
			var $targetImg = $(imgAll[imgArrIndex][i]);   //新的图片
			var thisTime = (d===1)?imgTime*i:imgTime*($imglist.length-1-i);
			
			$thisItme.append($targetImg);
			$thisimg.transform({origin:imgOrigin});
			$targetImg.transform({origin:imgOrigin,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(autoTimer);
		anigo(1);
	    autoTimer = setInterval(function(){
			anigo(1);
		},autointerval);
	}
	
	function autoShop(){
		clearInterval(autoTimer);   //清除定时器
	}
	
	
	return init;
})();   //追加括号,表示调用

loopPlayInit();


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
Jquery插件transform旋转焦点图
  • 参与学习       31563    人
  • 解答问题       52    个

本视频教程教你制作带旋转效果的焦点图轮播器,结合案例学的更快

进入课程

跪求源码啊

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信