jQuery点击滑动选择日期月份代码



94 372 125



特效描述:jQuery点击滑动 选择日期月份,jQuery选择日期的滑动块代码

代码结构

1. 引入JS

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

2. HTML代码

	<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>
	<!-- 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

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