使用JavaScript实现轮播图效果使用JavaScript实现轮播图效果

本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下
纯js，不使用轮播图控件怎么做轮播图呢，往下看吧
效果图：
【使用JavaScript实现轮播图效果】
1.可点击小圆点切换图片
2.可点击左右按钮切换图片
3.可自动播放
先上CSS和HTML代码：

< >

文章图片

文章图片

文章图片

文章图片

* {padding: 0; margin: 0; }a {text-decoration: none; }ol {list-style: none; }.main {width: 980px; height: 455px; margin-left: 440px; margin-top: 10px; }.focus {position: relative; width: 721px; height: 455px; background-color: purple; overflow: hidden; }.focus ul {position: absolute; top: 0; left: 0; width: 600%; }.focus ul li {float: left; list-style: none; }.arrow-l,.arrow-r {display: none; position: absolute; top: 50%; margin-top: -20px; width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-family: 'icomoon'; font-size: 18px; z-index: 2; }.arrow-r {right: 0; }.circle {position: absolute; bottom: 10px; left: 50px; }.circle li {float: left; width: 8px; height: 8px; /*background-color: #fff; */border: 2px solid rgba(255, 255, 255, 0.5); margin: 0 3px; border-radius: 50%; /*鼠标经过显示小手*/cursor: pointer; }.current {background-color: #fff; }

最后就是JS代码部分了

window.addEventListener('load', function() {// 获取要使用到的元素var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('.arrow-r'); var focus = document.querySelector('.focus'); var focusWidth = focus.offsetWidth; //鼠标移动到图片上，显示左右切换的按钮focus.addEventListener('mouseenter', function() {arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; //清除定时器，不再自动播放clearInterval(timer); timer = null; //清除定时器变量}); //鼠标离开，左右切换按钮隐藏focus.addEventListener('mouseleave', function() {arrow_l.style.display = 'none'; arrow_r.style.display = 'none'; timer = setInterval(function() {arrow_r.click(); }, 2000)}); var ul = focus.querySelector('ul'); var ol = focus.querySelector('.circle'); console.log(ol); for (var i = 0; i < ul.children.length; i++) {var li = document.createElement('li'); //创建自定义属性indexli.setAttribute('index', i); //根据li（图片）的个数自动添加左下角的小圆点ol.appendChild(li); li.addEventListener('click', function() {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ''; }this.className = 'current'; var index = this.getAttribute('index'); num = index; circle = index; animate(ul, -index * focusWidth); })}ol.children[0].className = 'current'; var first = ul.children[0].cloneNode(true); ul.appendChild(first); var num = 0; var circle = 0; var flag = true; //点击'>'进行图片向右切换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 == ol.children.length) {circle = 0; }circleChange(); }); //点击'<'进行图片向左切换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()}); //清除样式函数，排他思想function circleChange() {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ''; }ol.children[circle].className = 'current'; }//定时器+click（）实现自动播放var timer = setInterval(function() {arrow_r.click(); }, 2000) })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。