jquery图片左右滚动切换特效_点击左右箭头变换图片

jquery图片左右滚动切换特效_点击左右箭头变换图片3385
$(function(){	/*未元素的首尾添加补白*/	var $panels				= $('#slider .scrollContainer > li');	var $parent=$panels.parent();//或许当前li的最近一级的父元素	var $length=$panels.length;//获取指定length值	var $first=$panels.eq(0).clone().addClass("panel cloned").attr("id",'panel_'+($length+1));//获取第一个元素并复制	var $last=$panels.eq($length-1).clone().addClass("cloned").attr("id",'panel_0');;//获取最后一个元素并复制	$parent.append($first);//将li序列中的第一个添加到ul元素中的最后一个  $("#slide02").scrollLeft(0);	$parent.prepend($last);//将li序列中的最后一个添加到ul元素中的第一个	var totalPanels			= $(".scrollContainer").children().size();//所有子元素的数字,滚动元素的个数 7	var regWidth			= $(".panel").css("width");//获取li元素的宽度	var regImgWidth			= $(".panel img").css("width");//获取其中图片的宽度	var movingDistance	    = 195;//每次移动的距离	var curWidth			= 230;//当前中间li的宽度为350px	var curHeight         =312;//当前中间li的高度未312  	var curImgWidth  =230;	var curImgHeight  =288;	var othersW           =170;//其他li的宽度	var othersH           =235;//高度	var othersImgW           =170;//其他li的宽度	var othersImgH           =213;//高度	var $panels				= $('#slider .scrollContainer > li');//此处作用是将复制进来补白的元素重新赋值	var $container			= $('#slider .scrollContainer');	$panels.css({'float' : 'left','position' : 'relative'});	$("#slider").data("currentlyMoving", false);//是否正在运动中	$container.css('width', (($panels[0].offsetWidth+25) * $panels.length) + 60 ).css('left','0');//计算容器的总的宽度 PS:25为margin值 offsetWidth	var scroll = $('#slider .scroll').css('overflow', 'hidden');	function returnToNormal(element) {//li元素返回到正常状态		$(element).animate({ width: othersW,height: othersH}).find("img").animate({width:othersImgW,height:othersImgH});	};	function growBigger(element) {//当前元素之间变大		$(element).addClass("current").animate({ width: curWidth,height:curHeight}).siblings().removeClass("current")		.end().find("img").animate({width:curImgWidth,height:curImgHeight})	}	//direction true = right, false = left	function change(direction) {		//if not at the first or last panel		if((direction && !(curPanel < totalPanels-2)) || (!direction && (curPanel <= 1))) {			return false;		}			//if not currently moving		if (($("#slider").data("currentlyMoving") == false)) {			$("#slider").data("currentlyMoving", true);			var next         = direction ? curPanel + 1 : curPanel - 1;			var leftValue    = $(".scrollContainer").css("left");			var movement	 = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;			$(".scrollContainer").stop().animate({"left": movement}, function() {				$("#slider").data("currentlyMoving", false);			});			returnToNormal("#panel_"+curPanel);			growBigger("#panel_"+next);			curPanel = next;			//remove all previous bound functions			$("#panel_"+(curPanel+1)).unbind();				//go forward			$("#panel_"+(curPanel+1)).click(function(){ change(true); });			//remove all previous bound functions																		$("#panel_"+(curPanel-1)).unbind();			//go back			$("#panel_"+(curPanel-1)).click(function(){ change(false); }); 			//remove all previous bound functions			$("#panel_"+curPanel).unbind();		}	}	// Set up "Current" panel and next and prev 设置当前元素和上下	growBigger("#panel_1");		var curPanel = 1;	$("#panel_"+(curPanel+1)).click(function(){ change(true);return false;});	$("#panel_"+(curPanel-1)).click(function(){ change(false);return false;});	//when the prev/next arrows are clicked	$("#slider .next").click(function(){ change(true);});		$("#slider .prev").click(function(){ change(false);});	$(window).keydown(function(event){//键盘方向键控制		switch (event.keyCode) {			case 13: //enter				$(".next").click();			break;			case 37: //prev arrow				$(".prev").click();			break;			case 39: //next arrow				$(".next").click();			break;		}	});		});

也许你还喜欢