jquery获取当前对象序号的问题

埚牛 发布于 2014/06/05 14:33
阅读 1K+
收藏 0
黄色的框是固定的,比如点击【百度贴吧】,这一行图标就整体向左移动,直到【百度贴吧】进入到黄色的框内才停止移动,第二行图标则显示对应的内容。目前此效果已基本实现,就是左右箭头的效果有问题。需求的箭头的效果是点一下箭头,图标移动到下一个,第二行的图标显示对应的内容。
现在的问题是点击箭头后,如何获取进入黄色框内的图标序号,用以显示第二行对应的内容?
我的思路是通过进入黄色框内的图标中点到父级元素左边的距离以及黄色框中点到父级元素左边的距离是否相等,来判断该图标为当前图标。



<div class="source_01">
				<a class="source_01_btn_pre" href="#"><img src="images/ar_pre.jpg"></a>
				<a class="source_01_btn_next" href="#"><img src="images/ar_next.jpg"></a>
				<div class="source_box">
				<div class="source_01_list">
					<ul class="source_01_logo_b">
						<li><input class="r_01" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="r_02" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="r_03" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="r_04" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="r_05" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="r_06" name="" type="text" disabled="disabled" value="" /></li>
					</ul>
				</div>
				</div>
			</div>
			<div class="source_02 dsn">
				<div class="source_02_list">
					<ul class="source_02_logo_s">
						<li><input class="c_01" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_02" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_04" name="" type="text" disabled="disabled" value="" /></li>
					</ul>
				</div>
			</div>
			<div class="source_02 dsn">
				<div class="source_02_list">
					<ul class="source_02_logo_s">
						<li><input class="c_03" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_05" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_04" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_01" name="" type="text" disabled="disabled" value="" /></li>
					</ul>
				</div>
			</div>
			<div class="source_02 dsn">
				<div class="source_02_list">
					<ul class="source_02_logo_s">
						<li><input class="c_03" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_05" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_04" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_01" name="" type="text" disabled="disabled" value="" /></li>
					</ul>
				</div>
			</div>
			<div class="source_02 dsn">
				<div class="source_02_list">
					<ul class="source_02_logo_s">
						<li><input class="c_03" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_05" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_04" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_01" name="" type="text" disabled="disabled" value="" /></li>
					</ul>
				</div>
			</div>
			<div class="source_02 dsn">
				<div class="source_02_list">
					<ul class="source_02_logo_s">
						<li><input class="c_01" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_02" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_04" name="" type="text" disabled="disabled" value="" /></li>
					</ul>
				</div>
			</div>
			<div class="source_02 dsn">
				<div class="source_02_list">
					<ul class="source_02_logo_s">
						<li><input class="c_03" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_05" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_04" name="" type="text" disabled="disabled" value="" /></li>
						<li><input class="c_01" name="" type="text" disabled="disabled" value="" /></li>
					</ul>
				</div>
			</div>
$(function(){
	var $bList=$(".source_01_list");//$bList的宽度须小于或等于s01的宽度
	var $sList=$(".source_02_list");
	var $s01=$(".source_01_logo_b");
	var $logoBig=$(".source_01_logo_b li")
	var $btnPrev=$(".source_01_btn_pre");
	var $btnNext=$(".source_01_btn_next");
	var logoLength=$(".source_01_logo_b").find("li").length;
	var logoWidth=$(".source_01_logo_b li").width();
	
	$logoBig.click(function(){
		var scroll_to=$(this).position().left+$(this).width()/2;
		var scroll_position=$bList.width()/2-scroll_to;
		$s01.stop(true,false).animate({left:scroll_position},300);
		$bList.addClass("source_01_selected");
		$bList.removeClass("h156");
		$sList.removeClass("source_02_selected");
		index=$logoBig.index(this);
		$(".source_02").eq(index).show().siblings("div.source_02").hide();
		$(this).children("input").css("background-position","0 -110px");
		$(this).siblings("li").children("input").css("background-position","0 0");
		$(".source_02_logo_s li").children("input").css("background-position","0 0");
		$(".source_02_logo_s").stop(true,false).animate({left:0},300);
		$(".contain").hide();
		$btnPrev.animate({opacity:"1"},300);
		$btnNext.animate({opacity:"1"},300);
	});

	$btnNext.click(function(){
		var dist01=$logoBig.eq(logoLength-1).offset().left+logoWidth/2;
		var dist02=$bList.offset().left+$bList.width()/2;
		$bList.addClass("source_01_selected");
		$bList.removeClass("h156");
		$sList.removeClass("source_02_selected");
		if(dist01==dist02){
			$btnNext.animate({opacity:"0.30"},300);
			//alert("stop");
		}else{
			$s01.stop(true,false).animate({left:"-="+logoWidth},100);
			$btnPrev.animate({opacity:"1"},300);
		}
		for ( var i = 0; i < logoLength+1; i++ ) {  
			var dist05=$logoBig.eq(i-1).offset().left+logoWidth/2;
			var dist02=$bList.offset().left+$bList.width()/2;
			if ( dist05 == dist02 ) {  
				var index05=i; 
				//alert(11);
				$(".source_02").eq(index05).show().siblings("div.source_02").hide();
			}  
		}  
		
	});
	$btnPrev.click(function(){
		var dist03=$logoBig.eq(0).offset().left+logoWidth/2;
		var dist04=$bList.offset().left+$bList.width()/2;
		$bList.addClass("source_01_selected");
		$bList.removeClass("h156");
		$sList.removeClass("source_02_selected");
		if(dist03==dist04){
			$btnPrev.animate({opacity:"0.30"},300);
		}else{
			$s01.stop(true,false).animate({left:"+="+logoWidth},100);
			$btnNext.animate({opacity:"1"},300);
		}
		for ( var i = 0; i < logoLength+1; i++ ) {  
			var dist05=$logoBig.eq(i-1).offset().left+logoWidth/2;
			var dist02=$bList.offset().left+$bList.width()/2;
			if ( dist05 == dist02 ) {  
				var index05=i; 
				//alert(11);
				$(".source_02").eq(index05).show().siblings("div.source_02").hide();
			}  
		} 
	});
});

$(function(){
	var $bList=$(".source_01_list");
	var $sList=$(".source_02_list");
	var $s02=$(".source_02_logo_s");
	var $logoSmall=$(".source_02_logo_s li");

	$logoSmall.click(function(){
		var scroll_to01=$(this).position().left+$(this).width()/2;
		var scroll_position01=$sList.width()/2-scroll_to01;
		$s02.stop(true,false).animate({left:scroll_position01},300);	
		$bList.addClass("h156");
		$sList.addClass("source_02_selected");
		var index01=$(".source_02_logo_s li").index(this);
		$(".contain").eq(index).show().siblings(".contain").hide();
		$(".contain").children(".con").eq(index01).show().siblings(".con").hide();
		$(this).children("input").css("background-position","0 -80px");
		$(this).siblings("li").children("input").css("background-position","0 0");
	});
});



加载中
0
len
len
不要再单独立去写向前向后的处理逻辑了,转换成向前向后就是模拟点击了当前选中的前面一个或者是后面一个。所以你的问题就变成了当前是谁,下一个是谁,上一个是谁,这个应该没有难度了吧。
0
梦想岛
梦想岛

可以像轮播图片那样解决吧?

所有都放一行,可见域是可见宽度,显示N个,当前是  index, 如果index=N 再轮播一次。

0
埚牛
埚牛
现在的问题是如何获取当前的index值呢?
返回顶部
顶部