jQuery月份选择滑块代码



104 412 138



特效描述:jQuery 月份选择滑块代码,jQuery月份选择滑块代码

代码结构

1. 引入JS

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

2. HTML代码

<center>
<div>
	<ul class="sliderBar clear" id="slider-index">
		<li>
			1
			<div class="indexP">
				<div>购买1个月</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			2
			<div class="indexP">
				<div>购买2个月</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			3
			<div class="indexP">
				<div>购买3个月</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			4
			<div class="indexP">
				<div>购买4个月</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			5
			<div class="indexP">
				<div>购买5个月</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			6
			<div class="indexP">
				<div>购买6个月</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			7
			<div class="indexP">
				<div>购买7个月</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			8
			<div class="indexP">
				<div>购买8个月</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			9
			<div class="indexP">
				<div>购买9个月</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			10
			<div class="indexP">
				<div>购买10个月</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			11
			<div class="indexP">
				<div>购买11个月</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			1年
			<div class="indexP">
				<div>购买1年</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			2年
			<div class="indexP">
				<div>购买2年</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
		<li>
			3年
			<div class="indexP">
				<div>购买3年</div>
				<div class="shanjiao-out"></div>
				<div class="shanjiao-inner"></div>
			</div>
		</li>
	</ul>
</div>
</center>
<!-- JS部分 -->	
<script>
	var arOB = [];
	var ULobj = $('#slider-index>li');
	for(var i=0;i<ULobj.length;i++){
		arOB.push(ULobj[i]);
	}
	function changeCS(ints){
		for(var i=0;i<arOB.length;i++){
			if( i <= ints ){
				arOB[i].style.backgroundColor="#FCF8E3";
			}else{
				arOB[i].style.backgroundColor="#F2F2F2";
			}
		}
	}
	$(function(){
		$("#slider-index>li").each(function(){
			$(this).click(function(){
				$(this).children(".indexP").show();
				$(this).siblings().children(".indexP").hide();
				var number=$(this).index();
				var $j=$("#slider-index>li").length;
				changeCS(number);
				// var li=new Array([$j]);
				// for(k=0;k<$i.length;k++){
				// 	alert(li[k]);
				// }
			})
		})
	})
</script>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 图片滑动 图片滑块

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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