本文实例为大家分享了JavaScript实现简单的轮播图的具体代码,供大家参考,具体内容如下
js轮播图实现思路
1、先获取元素 盒子 左右按钮
2、鼠标经过 显示/隐藏 左右侧按钮
3、动态生成小圆圈、 添加自定义属性
4、小圆圈点击事件 添加current类名
5、添加动画事件 animate 等于 -索引号*focusWidth
6、克隆第一张图片到最后面
7、添加右侧/左侧按钮点击事件
8、设置定时器 手动调用右侧按钮点击事件
html代码部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/index.css" > <script src="/UploadFiles/2021-04-02/index.js">css样式部分
* { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; vertical-align: top; } a { text-decoration: none; } .focus { position: relative; width: 721px; height: 455px; margin: 100px auto; overflow: hidden; } .focus ul { position: absolute; top: 0; left: 0; width: 600%; } .focus ul li { float: left; } .arrow_r, .arrow_l { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 24px; background: rgba(0, 0, 0, .2); color: #fff; z-index: 1; } .arrow_r { right: 0; } .circle { position: absolute; bottom: 10px; left: 50px; } .circle li { float: left; width: 8px; height: 8px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; margin: 0 3px; cursor: pointer; } .current { background-color: #fff; }javascript部分
window.addEventListener('load', function() { //获取元素 var focus = document.querySelector('.focus'); var arrow_r = document.querySelector('.arrow_r'); var arrow_l = document.querySelector('.arrow_l'); var focusWidth = focus.offsetWidth; // 鼠标经过focus盒子 显示/隐藏 左右侧按钮 暂停轮播 focus.addEventListener('mouseenter', function() { arrow_r.style.display = 'block'; arrow_l.style.display = 'block'; clearInterval(timer); timer = null; }); focus.addEventListener('mouseleave', function() { arrow_r.style.display = 'none'; arrow_l.style.display = 'none'; timer = setInterval(function() { //调用点击事件 arrow_r.click(); }, 2000); }); //动态生成小圆圈 var ul = focus.querySelector('ul'); var ol = focus.querySelector('.circle'); for (var i = 0; i < ul.children.length; i++) { var li = document.createElement('li'); li.setAttribute('index', i); ol.appendChild(li); //小圆圈点击事件 li.addEventListener('click', function() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } var index = this.getAttribute('index'); num = index; circle = index; this.className = 'current'; animate(ul, -index * focusWidth); }) } ol.children[0].className = 'current'; //克隆第一张图片放到最后一张 var fis = ul.children[0].cloneNode(true); ul.appendChild(fis); //右侧按钮点击事件 var num = 0; var circle = 0; arrow_r.addEventListener('click', function() { if (num === ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * focusWidth); circle++; if (circle === ul.children.length - 1) { circle = 0; } for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[circle].className = 'current'; }); //左侧按钮点击事件 arrow_l.addEventListener('click', function() { if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * focusWidth + 'px'; } num--; animate(ul, -num * focusWidth); circle--; circle = circle < 0 ? ol.children.length - 1 : circle; // 调用函数 circleChange(); }); //清除其余小圆圈的current类名 function circleChange() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } // 留下当前的小圆圈的current类名 ol.children[circle].className = 'current'; } //动画函数 function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function() { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { clearInterval(obj.timer); callback && callback(); } obj.style.left = obj.offsetLeft + step + 'px'; }, 15); } //自动轮播放轮播图 var timer = setInterval(function() { //调用点击事件 arrow_r.click(); }, 2000); });以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,轮播图
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“基于JavaScript实现简单的轮播图”评论...
更新动态
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]