hbuilderx原生开发js方法_原生js实现轮播图(两种方法)

f50f7be1c440ec60820b8f0cef719d0c.png

第一种:

这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意,

d239b74a3fe56975f149b4552c37dede.png

第二种:

这个是最近刚写的,所以比较仔细,尽量多看看这个,跟步骤结合起来应该是能看懂的:

轮播图要实现的步骤和效果

1,显示和隐藏左右按钮

(1),鼠标移入,左右按钮显示

(2),鼠标离开,左右箭头隐藏

2,动态生成小圆点

(1)获取所有图片

(2)循环

(1),创建新的li

(2),把li添加到ol中

(3),给新的li设置索引号(自定义属性)

(4),给新的li注册点击事件

3,单击小圆点,小圆点呈现选中白色

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常好的问题!以下是一个基本的原生 JavaScript 轮实现: HTML ```html <div class="slider"> <div class="slider-wrapper"> <div class="slider-item"></div> <div class="slider-item"></div> <div class="slider-item"></div> </div> <div class="slider-nav"> <a class="slider-prev" href="#">Prev</a> <a class="slider-next" href="#">Next</a> </div> </div> ``` CSS ```css .slider { position: relative; width: 100%; height: 300px; overflow: hidden; } .slider-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 300%; display: flex; transition: transform 0.3s ease-in-out; } .slider-item { height: 100%; width: 33.333%; } .slider-nav { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; } .slider-prev, .slider-next { margin: 0 10px; padding: 5px 10px; background-color: #ddd; border-radius: 3px; } .slider-prev:hover, .slider-next:hover { background-color: #bbb; } ``` JavaScript ```js const sliderWrapper = document.querySelector('.slider-wrapper'); const prevBtn = document.querySelector('.slider-prev'); const nextBtn = document.querySelector('.slider-next'); const sliderItems = document.querySelectorAll('.slider-item'); const itemWidth = sliderItems[0].offsetWidth; let position = 0; nextBtn.addEventListener('click', () => { position -= itemWidth; if (position < -itemWidth * (sliderItems.length - 1)) { position = 0; } moveToPosition(); }); prevBtn.addEventListener('click', () => { position += itemWidth; if (position > 0) { position = -itemWidth * (sliderItems.length - 1); } moveToPosition(); }); function moveToPosition() { sliderWrapper.style.transform = `translateX(${position}px)`; } ``` 这个例子通过改变 sliderWrapper 的 transform 属性来移动轮的位置。prevBtn 和 nextBtn 的点击事件分别减小或增加 position 值,而 moveToPosition 函数将新的 position 值应用到 sliderWrapper 上,实现的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值