JS

2024-02-16 06:58| 来源: 网络整理| 查看: 265

JS-轮播图（圆点点击，左右侧按钮切换，自动播放）原创

夕陌 2023-04-17 10:16:27 ©著作权

文章标签类名 i++ 获取数据文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者夕陌的原创作品，请联系作者获取转载授权，否则将追究法律责任 //放入数据 //点击小圆圈，可切换对应图片，小圆圈的样式也跟随变动 //点击左右侧按钮，可来回切换图片，小圆圈样式跟随变动 //可自动切换轮播图，鼠标移入后不在自动滚动 (function(){ var date = [ { img : './image/banner.jpeg' }, { img : './image/banner1.jpg' }, { img : './image/banner2.jpg' }, { img : './image/banner3.jpg' }, ] //获取小圆圈父级 var yuanquan = document.querySelector('.arrowheadFs') //获取图片父级以及本身的元素 var ban = document.querySelector('.bander') var imban = ban.querySelector('img') //左/右切换的元素 var left = document.querySelector('.i-left') var right = document.querySelector('.i-right') //初始化；四个小圆圈 function init(){ //有多少张图片，就显示多少个li标签（目的：动态生成小圆圈） for(let i = 0 ; i < date.length ; i++){ //创建li标签，a标签 var li = document.createElement('li') var a = document.createElement('a') li.appendChild(a) yuanquan.appendChild(li) } } init() //获取数据的下标，显示在页面上 function change(index){ //获取到date中的内容 var d = date[index] //将获取到的dateimg给html中的src，显示在页面上 imban.src = d.img //获取半透明度的那个类名 var arrowheadFsli = ban.querySelector('.arrowheadFsli') //当前等于类名时，将类名更换 if(arrowheadFsli){ arrowheadFsli.className = '' } //当图片发生改变，那么获取圆圈的透明度样式给当前的下标，但是出现问题，透明度的圆圈应该就只有一个，这边会显示多个，为了解决该问题如上，if判断 var li1 = yuanquan.children[index] li1.className = 'arrowheadFsli' } //需要设置0，将第0张默认显示在页面上 change(0) //向左 indexi = 0 function left1(){ indexi -- if(indexi < 0){ indexi = date.length - 1 } change(indexi) } //向右 function right1(){ indexi ++ if(indexi > date.length - 1 ){ indexi = 0 } change(indexi) } //注册事件，来回切换 left.onclick = left1 right.onclick = right1 //圆圈 for(let i = 0 ; i < yuanquan.children.length ; i++){ var a = yuanquan.children[i] console.log(a) a.onclick = function(){ indexi = i change(i) } } //获取banner区域 var banner = document.querySelector('.bander') //自动播放 var tirmid function begin(){ if(tirmid){ return } tirmid = setInterval(right1,1500) } begin() //自动播放暂停 function cease(){ clearTimeout(tirmid) tirmid = null } banner.onmousemove = cease banner.onmouseleave = begin }())

赞收藏评论分享举报

上一篇：原型链

下一篇：JS-碰撞的小球

【本文地址】

JS

JS

今日新闻

推荐新闻