jQuery仿阿里云的購買日期選擇樣式代碼



104 412 138



特效描述:jQuery仿阿里云 購買日期選擇樣式,仿阿里云的購買日期選擇,饅頭原創

代碼結構

1. 引入JS

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

2. HTML代碼

	<div class="slider-date" id="slider-date-1">
		<!--底層-->
		<ul class="slider-bg clearfix">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>1年</li>
			<li>2年</li>
			<li>3年</li>
		</ul>
		<!--互動層-->
		<div class="slider-bar">
			<ul class="slider-bg clearfix">
				<li>1<span>1個月</span></li>
				<li>2<span>2個月</span></li>
				<li>3<span>3個月</span></li>
				<li>4<span>4個月</span></li>
				<li>5<span>5個月</span></li>
				<li>6<span>6個月</span></li>
				<li>7<span>7個月</span></li>
				<li>8<span>8個月</span></li>
				<li>9<span>9個月</span></li>
				<li>1年<span>1年</span></li>
				<li>2年<span>2年</span></li>
				<li>3年<span>3年</span></li>
			</ul>
			<!--滑塊按鈕-->
			<a href="javascript:;" class="slider-bar-btn"><i></i><i></i></a>
		</div>
	</div>
<br>
<br>
	<div class="slider-date" id="slider-date-2">
		<!--底層-->
		<ul class="slider-bg clearfix">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>1年</li>
			<li>2年</li>
			<li>3年</li>
		</ul>
		<!--互動層-->
		<div class="slider-bar">
			<ul class="slider-bg clearfix">
				<li>1<span>1個月</span></li>
				<li>2<span>2個月</span></li>
				<li>3<span>3個月</span></li>
				<li>4<span>4個月</span></li>
				<li>5<span>5個月</span></li>
				<li>6<span>6個月</span></li>
				<li>7<span>7個月</span></li>
				<li>8<span>8個月</span></li>
				<li>9<span>9個月</span></li>
				<li>1年<span>1年</span></li>
				<li>2年<span>2年</span></li>
				<li>3年<span>3年</span></li>
			</ul>
			<!--滑塊按鈕-->
			<a href="javascript:;" class="slider-bar-btn"><i></i><i></i></a>
		</div>
	</div>
<br>
<br>
	<div class="slider-date" id="slider-date-3">
		<!--底層-->
		<ul class="slider-bg clearfix">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>1年</li>
			<li>2年</li>
			<li>3年</li>
		</ul>
		<!--互動層-->
		<div class="slider-bar">
			<ul class="slider-bg clearfix">
				<li>1<span>1個月</span></li>
				<li>2<span>2個月</span></li>
				<li>3<span>3個月</span></li>
				<li>4<span>4個月</span></li>
				<li>5<span>5個月</span></li>
				<li>6<span>6個月</span></li>
				<li>7<span>7個月</span></li>
				<li>8<span>8個月</span></li>
				<li>9<span>9個月</span></li>
				<li>1年<span>1年</span></li>
				<li>2年<span>2年</span></li>
				<li>3年<span>3年</span></li>
			</ul>
			<!--滑塊按鈕-->
			<a href="javascript:;" class="slider-bar-btn"><i></i><i></i></a>
		</div>
	</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 日期時間 時鐘 日歷 時間 日歷插件 時間日期插件 其他 圖片拖動 圖片拖拽 圖片滑動 圖片滑塊 時間日期插件 時間日期 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子