web前端学习之轮播图实现(原生js)
很久前接触过html css js 但自己在工作中用的少,简单的需求直接vue 走起,没有静下心好好写点js css 什么的,现在想要好好学习下 大前端的知识了,第一个小练习,做了个轮播图
网上有很多轮播图的实现过程,每个人都有自己不一样的思路,自己只要实现了就行。当然有些思路确实比我的要好,后续借鉴学习。
逻辑:将要展示的图片全部放在盒子里,超出部分隐藏,然后设置定时器,没两秒循环一次 img 标签,如果display 为block 就将 display 设置为none 那么后面的图片就到当前的div 区域内了,大体思路是这样 ,当然后面加入了js 时间 支持前后翻页,和提示功能
上代码如下:
<!DOCTYPE html> <html> <head> <title>caroucel</title> </head> <style> *{ margin:0; padding:0 } .box { width: 300px; height: 250px; border: 1px solid red; position: relative } img { width: 300px; height: 250px; } #prev { position: absolute; top: 50%; margin-top: -12px; height: 35px; width: 15px; background-color: rgba(255, 0, 0, .6); vertical-align: center; line-height: 35px; cursor:pointer; } #next { position: absolute; top: 50%; right: 0; margin-top: -12px; height: 35px; width: 15px; background-color: rgba(255, 0, 0, .6); vertical-align: center; line-height: 35px; cursor:pointer; } </style> <body> <div class=‘box‘ style=‘overflow: hidden‘> <img src="./1" > <img src="./2" > <img src="./3" > <img src="./4" > <img src="./5" > <span id=‘prev‘> < </span> <span id=‘next‘> > </span> </div><div id=‘dd‘></div> <script> // 修改样式为块 function inintBlock() { const imgObjs = document.getElementsByTagName("img") for (let i = 0; i < imgObjs.length; i++) { imgObjs[i].style.display = ‘block‘ } } inintBlock() function operate() { const imgObjs = document.getElementsByTagName("img") for (let i = 0; i < imgObjs.length; i++) { if (imgObjs[i].style.display === ‘block‘) { imgObjs[i].style.display = ‘none‘ break; } } const state = Array.prototype.slice.call(imgObjs).map(function (item) { return item.style.display }) const res = state.filter(function (i) { return i === ‘none‘ }) if (res.length === 5) { inintBlock() } } let interval = window.setInterval( function () { operate() }, 2000 ) const el = document.getElementsByClassName(‘box‘)[0] el.addEventListener(‘mouseenter‘, function (event) { window.clearInterval(interval) }) el.addEventListener(‘mouseleave‘, function (event) { interval = window.setInterval(function () { operate() }, 2000) }) document.getElementById(‘prev‘).addEventListener(‘click‘, //获取当前images 的属性进行遍历,找block属性,修改前一个节点样式 function () { const imgObjs = document.getElementsByTagName("img") for (let i = 0; i <imgObjs.length;i++){ if(imgObjs[i].style.display === ‘block‘){ if(i-1<0){ document.getElementsByClassName(‘box‘)[0].nextSibling.innerText = ‘已经是首页了‘ break; } imgObjs[i-1].style.display = ‘block‘ break; } } }) document.getElementById(‘next‘).addEventListener(‘click‘,function(){ const imgObjs = document.getElementsByTagName("img") for (let i = 0; i <imgObjs.length;i++){ if(imgObjs[i].style.display === ‘block‘){ if(i+1>4){ document.getElementsByClassName(‘box‘)[0].nextSibling.innerText = ‘已经是最后一页了‘ break; } imgObjs[i].style.display = ‘none‘ break; } } }) </script> </body> </html>
代码也是很简单的,主要联系下,js 遍历 dom 的操作,孰能生巧,多多练习
有个小问题,如果我想把图片做成动画,淡入淡出 ,应该怎么搞呢?目前我想到的方法是利用 trasition opacity 进行区域透明度的切换,但是我的轮播图的逻辑也得修改了,不用上面的(将图片全部叠加在一起通过 opacity 控制他们的隐藏显示)
做的过程中有发现个方法,通过定位把几张图片从左往右一次拼接起来,点击的时候向左或者向右触发事件,事件内容是修改各个图片的定位 left right 值 从而产生左右翻滚的效果。(z-index 也是个实现的方法)
刚开始感觉下手很难,但做着做着方法也就越来越多,根据需求选择最合适的最适合自己的就好。