jQuery入职经历水平时间轴历程代码

jQuery入职经历水平时间轴历程代码-精品资源网
jQuery入职经历水平时间轴历程代码
此内容为免费资源,请登录后查看
0
免费资源

jQuery入职经历水平时间轴历程代码

一款带有左右箭头控制的jQuery入职经历水平时间轴历程代码,简单横向时间轴样式,鼠标悬停变色高亮显示。

js代码

<script type=\"text/javascript\">
	
	$(function() {
		
		var timeLength = $(\'.time-box li\').length,
			timeliWidth = $(\'.time-box li\').outerWidth();
		
		var index = 0;
		
		$(\'.time-box ul\').width(timeLength * timeliWidth);
		
		function slideOne(i) {
			var scrollVal = i * timeliWidth; //每次切换的数量
			$(\'.time-box\').stop().animate({
				scrollLeft: scrollVal
			}, 300);
		}
		
		$(\'.right-btn\').click(function() {
			index = index >= (timeLength-4) ? 0 : index + 1;
			slideOne(index);
		})
		
		$(\'.left-btn\').click(function() {
			index = index <= 0 ? (timeLength-4) : index - 1;
			slideOne(index);
		})
		
	})
	
</script>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容