jquery左右按钮控制图片倒金字塔滚动中间图片放大显示



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

241 961 321



特效描述:jquery 左右按钮控制 图片倒金字塔滚动 中间图片放大显示。倒金字塔滚动的图片滚动

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<div class="btnMode" id="slider">    
	<a href="javascript:void(0);" class="prev btn"></a>
	<div class="scroll">	
		<ul class="scrollContainer">
			<li class="panel" id="panel_1">
				<a href="http://www.dijiuzhanzhang.com/" class="inside" target="_blank">
					<img width="230" height="295" alt="Alexander McQueen秋季" src="images/dududu.jpg" />
					<span>Alexander McQueen秋季</span>
				</a>
			</li>
			<li class="panel" id="panel_2">
				<a href="http://www.dijiuzhanzhang.com/" class="inside" target="_blank">
					<img width="230" height="295" alt="Gustavsson演绎朋克的性感" src="images/penk.jpg" />
					<span>Gustavsson演绎朋克的性感</span>
				</a>
			</li>
			<li class="panel" id="panel_3">
				<a href="http://www.dijiuzhanzhang.com/" class="inside" target="_blank">
					<img width="230" height="295" alt="性感大行动 超模演绎" src="images/465.jpg" />
					<span>性感大行动 超模演绎</span>
				</a>
			</li>
			<li class="panel current" id="panel_4">
				<a href="http://www.dijiuzhanzhang.com/" class="inside" target="_blank">
					<img width="230" height="295" alt="高端摄影 展示人体艺术" src="images/sey.jpg" />
					<span>高端摄影 展示人体艺术</span>
				</a>
			</li>
			<li class="panel" id="panel_5">
				<a href="http://www.dijiuzhanzhang.com/" class="inside" target="_blank">
					<img width="230" height="295" alt="让女人掉口水的超级男模" src="images/oab.jpg" />
					<span>让女人掉口水的超级男模</span>
				</a>
			</li>
			<li class="panel" id="panel_6">
				<a href="http://www.dijiuzhanzhang.com/" class="inside" target="_blank">
					<img width="230" height="295" alt="人体写真女郎 Aubade年历" src="images/wo.jpg" />
					<span>人体写真女郎 Aubade年历</span>
				</a>
			</li>
			<li class="panel" id="panel_7">
				<a href="http://www.dijiuzhanzhang.com/" class="inside" target="_blank">
					<img width="230" height="295" alt="僵尸男孩的性感震撼" src="images/ala.jpg" />
					<span>僵尸男孩的性感震撼</span>
				</a>
			</li>
		</ul>
	</div>
	<a href="javascript:void(0);" class="next btn"></a>     
</div>
<script type="text/javascript">
$(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;
		}
	});	
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到