jQuery月份選擇滑塊代碼



112 446 149



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

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

老夫子电子