jQuery带左右按钮控制的水平时间轴样式代码

来源:https://www.sucaihuo.com/js/3725.html 2018-06-03 11:41浏览(850) 收藏

一款简单的jQuery水平时间轴样式代码,带左右按钮控制向左向右滑动,可以用来展示个人历程、公司大事记等。
jQuery带左右按钮控制的水平时间轴样式代码
分类:日期时间 > 时间轴 难易:初级
查看演示 下载资源 下载积分: 20 积分
有问题,点击联系客服

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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2