轮播图带有缩略图

最新推荐文章于 2024-08-09 10:27:16 发布

seb_lin666

最新推荐文章于 2024-08-09 10:27:16 发布

阅读量2.4k

点赞数 1

分类专栏：前端文章标签：轮播图

本文链接：https://blog.csdn.net/seb_lin666/article/details/87911271

版权

本文介绍了如何根据设计需求实现一个带有缩略图和放大效果的轮播图。在实现过程中，面临了缩略图点击放大、缩小以及超过5个时的特殊处理，特别是当缩略图选中为第一个或第五个时，需要进行特定的滚动判断。通过计算当前元素的位置和相邻元素的数量，调整轮播图的margin-left实现平滑过渡。此外，还需注意在点击上一页或下一页时，如果当前缩略图位于边界，需相应地动画滚动到首尾。

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

设计给了个图要求轮播带有缩略图选样式还要放大如下图
在网上找了下没有有相似的但还是与设计图有些差距无奈
找了原来的代码以此为基础改呗

主要的还是缩略图的点击放大缩小以及大于5时选中第5个小图时整体滚动就是个小的轮播
无论是点击上一个、下一个、还是缩略图当选中的缩略图为第一个或第五个时（下图选中放大的为第三个）做判断
第一个：获取当前元素前面有几个兄弟元素如果大于等于4（之所以是4 缩略图最多展示5个在去掉选中的）则向右动画margin-left四个图片尺寸（尺寸=图片宽度+图片间隔）
否则小于4 则向右动画margin-left 相应数量图片尺寸
第五个：与第一个相反获取的是当前元素后面的兄弟元素

当当前缩略图已经是第一个时点击上一页则动画到最后一个
当当前缩略图已经是最后一个时点击下一页则动画到第一个

注：判断第一个与第五个时用的是 $(".breviary").find(".hover").position().left; 看偏移量如果图片宽度或其他位置改变这个偏移量需要改

					<div id="carousel">
						<ul class="picture">
							<li><img src="img/z1.jpg"></li>
							<li><img src="img/z2.png"></li>
							<li><img src="img/z3.png"></li>
							<li><img src="img/z4.jpg"></li>
							<li><img src="img/z5.png"></li>
							<li><img src="img/z6.jpg"></li>
							<li><img src="img/z7.png"></li>
						</ul>
						<span class="pre">
							<div class="info_sprite"></div>
						</span>
						<span class="next">
							<div class="info_sprite"></div>
						</span>
						<span class="banner_bg"></span>
						<div class=" breviary">
							<ul class="follow">
								<li class="hover"><img src="img/z1.jpg"></li>
								<