点击按钮切换页面，版面滑动切换

最新推荐文章于 2023-10-21 20:03:09 发布

zyjia_study

最新推荐文章于 2023-10-21 20:03:09 发布

阅读量4.4k

点赞数

本文链接：https://blog.csdn.net/zyjia_study/article/details/8468510

版权

这篇博客介绍了如何使用jQuery实现点击按钮时页面的滑动切换效果。详细讲解了如何处理边界情况，如到达第一个或最后一个版面时的跳转，并确保左上角的蓝色圆点能正确指示当前版面。还解决了快速点击按钮导致的动画队列问题，确保了交互体验的顺畅。

摘要由CSDN通过智能技术生成

UI 总是与js 、jQuery会结合在一起，实现更多非静态的动画效果，今天的小笔记，记录一下点击按钮时版面的切换

点击左上角的左右箭头，控制视频展示的左右滑动，单击向右箭头的时候，视频向左滚动隐藏，同时新的视频展示以滚动方式显示出来。

要做这个视频展示要做的

1.视频展示内容处于最后一个版面的时候，如果再向后，则应该跳转到第1个版面。

2.视频展示内容处于第1个版面的时候，如果再向前，就应该跳转到最后一个版面。

3.左上角的箭头旁边的蓝色圆点应该与动画一起切换，代表当前所处的版面。

html代码框架

<div class="v_show">
	<div class="v_caption">
		<h2 class="cartoon"></h2>
		<div class="highlight_tip">
			<span class="current">1</span><span>2</span><span>3</span><span>4</span>
		</div>
		<div class="change_btn">
			<span class="prev">上一页</span>
			<span class="next&