左右滑动效果轮播图

本文介绍了如何使用JavaScript原生代码创建一个左右滑动效果的轮播图。内容涵盖了图片组的布局设置,如利用float属性和overflow属性实现图片并排及隐藏超出部分,以及如何通过设置附属图实现无限循环切换。还涉及到了添加左右控制器、页码功能,并讲解了如何实现动画效果、页码高亮以及自动播放和鼠标悬停暂停的功能。
摘要由CSDN通过智能技术生成

图片轮播的方式有很多种,下面我们使用js原生代码来写出其中一种方式——左右滑动效果。
js原生和jQuery、还有Css都可以实现这个效果,jQuery因为封装了很多用法,所有使用起来
很简单、也方便了许多,其实也就是用js原生模拟出的这些用法。不管怎样,构造出一个基本的表现层那是必须的。
在这里插入图片描述

对于左右滑动效果轮播:

1.首先是外围部分跟图片组,外围部分宽高度只是你轮播的大小,而图片组需要设置你图片组里面全部加起来的宽度。因为需要左右滑动效果。所以运用了左浮动(float属性),将图片并排显示。
在这里插入图片描述

再通过超出范围隐藏(overflow属性),将超出外围盒子范围的图片隐藏。
在这里插入图片描述

为什么我的轮播只有五张图片,但图片组宽度我设置多了两张图片的位置呢? 因为还要设置附属图,才能无限循环的切换图片。图片组第一张图片要放最后一张图片的附属图,同样图片组的最后一张图片要放的第一张图片的附属图。因为现在第一张图是附属图,所有最后还需要给图片组像右边移动1000px,让第一张图在轮播上显示出来。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值