js轮播图片(JS实现简单图片轮播效果)
类别:编程学习 浏览量:2188
时间:2022-03-28 22:58:45 js轮播图片
JS实现简单图片轮播效果本文实例为大家分享了JS实现简单图片轮播效果的具体代码,供大家参考,具体内容如下
实现效果
- 左右按钮可点击左右移动显示图片进行无缝滚动
- 下面的小圆圈点击可跳到对应的图片索引
- 不进行上述操作时,图片自动轮播
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>Carousel chart</title> <link rel="stylesheet" href="./style.css" > <script src="./index.js"></script> <script src="./animate.js"></script> </head> <body> <li class="carousel_box" id="carousel-box"> <a href="javascript:;" class="arrow-l"> < </a> <a href="javascript:;" class="arrow-r"> > </a> <ul class="move"> <li><img src="./images/xuezhong_1.jpg" alt="js轮播图片(JS实现简单图片轮播效果)" border="0" />
一个大的li盒子里面,两个左右悬浮于中间的按钮,四张图片,一行相对于下面的小圆圈
CSS源码
*{ padding: 0; margin: 0; } li { list-style-type: none; } #carousel-box { position: relative; width: 700px; height: 300px; background-color: pink; margin: 100px auto; overflow: hidden; } .arrow-l,.arrow-r { display: none; position:absolute; width: 24px; height: 40px; top: 50%; margin-top: -20px; background: rgba(0, 0, 0, 0.3); text-align:center; line-height: 40px; color: #fff; font-size: 18px; font-family: 'icomoon'; z-index: 3; } .arrow-r { right: 0; } #carousel-box img{ width: 700px; height: 300px; } #carousel-box ul { position:absolute; width: 1000%; } #carousel-box ul li { float: left; } .circle { position: absolute; bottom: 10px; right: 10px; } .circle li { float: left; width: 8px; height: 8px; margin: 0 5px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; z-index: 9999; } .current { background-color: pink; }
JS源码
animate.js:在水平平面实现左右移动的函数
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); }
index.js
window.addEventListener('load', function () { var carousel = document.querySelector('.carousel_box'); var ul = document.querySelector('.move'); var ol = document.querySelector('.circle'); var carcouselWidth = carousel.offsetWidth; var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('.arrow-r'); carousel.addEventListener('mouseenter', function () { arrow_r.style.display = 'block'; arrow_l.style.display = 'block'; clearInterval(timer); timer = null; // 清除定时器变量 }) carousel.addEventListener('mouseleave', function () { arrow_r.style.display = 'none'; arrow_l.style.display = 'none'; timer = setInterval(function () { arrow_r.click(); }, 2000); }) var num = 0; var circle = 0; // 根据图片数量生成相对应的小圆圈 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 = ''; } this.className = 'current'; var n = this.getAttribute('index'); num = n; circle = n; animate(ul, -n * carcouselWidth); console.log(n); }) } ol.children[0].className = 'current'; var first = ul.children[0].cloneNode(true); ul.appendChild(first); var flag = true; /* function circleChange() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[circle].className = 'current'; } */ arrow_r.addEventListener('click', function () { if (flag) { flag = false; if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * carcouselWidth, function () { flag = true; }); } circle++; if (circle == ol.children.length) { circle = 0; } circleChange(); }) arrow_l.addEventListener('click', function () { if (flag) { flag = false; if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * carcouselWidth + 'px'; } num--; animate(ul, -num * carcouselWidth, function () { flag = true; }); circle--; circle = circle < 0 ? ol.children.length - 1 : circle; // 调用函数 circleChange(); } }); function circleChange() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[circle].className = 'current'; } var timer = setInterval(function () { arrow_r.click(); }, 2000);
心得:在js实现功能中,如何根据图片数量生成小圆圈并能无缝滚动需要重点注意。
未解决的bug:多次快速点击小圆圈跳转后,可能会导致小圈圈与图片索引位置错乱,同样点击左右按钮也有可能出现类似问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js网站前端效果(JS如何让你的移动端交互体验更加优秀)
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- js的事件处理程序底层原理(关于js的事件循环机制剖析)
- javaweb购物车案例(js实现模拟购物商城案例)
- pjs计算方式(JS代码编译器Monaco使用方法)
- JS函数前面感叹号的作用
- js判断对象是否存在
- js操作iframe
- js中什么是宏任务(浅谈JavaScript宏任务和微任务执行顺序)
- js如何编辑数组对象里的数组(JS操作对象数组实现增删改查实例代码)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- tomcat服务如何在eclipse中配置(HBuilderX配置tomcat外部服务器查看编辑jsp界面的方法详解)
- MVC中JSON字符长度超出限制
- jsonkeyvalue怎么取(替换json对象中的key最佳方案)
- 如何查找JS错误
- js基础入门运算符(js 可选链操作符的使用)
- 春天养佛肚竹,做好这几件事,叶绿根壮寓意好 越养越旺家(春天养佛肚竹做好这几件事)
- 律界衣品最好,时尚圈学识数高,41岁的Amal堪称现实版的傲骨贤妻(时尚圈学识数高)
- 刘智泰确认出演《Good Wife》 担纲男一号(刘智泰确认出演Good)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
- 汉族(汉族的祖先是谁)
- 中国有几个名族(中国有几个民族没列入56个民族)
热门推荐
- html5如何使用svg(将SVG图引入到HTML页面的实现)
- dedecms增加导航内容(织梦DEDECMS修改栏目关键词及描述长度的方法)
- sqlserver如何可视化表(sql server使用公用表表达式CTE通过递归方式编写通用函数自动生成连续数字和日)
- vio更新后怎么是黑页面(vite2.0 踩坑实录)
- sql server2008如何升级到2012(MS sqlserver 2008数据库转换成2000版本的方法)
- select 1 from 的作用
- python学生信息管理系统教程(学生信息管理系统Python面向对象版)
- mysql存储过程定义表(MySQL存储过程的创建、调用与管理详解)
- dedecms标签调用大全(Dedecms文章标题长度修改方法小结)
- sql怎么设置排列(SQL写法--行行比较)