jQuery仿阿里云的购买日期选择样式代码



100 398 133



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

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