jQuery點擊滑動選擇日期月份代碼



99 393 132



特效描述: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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表