使用JavaScript实现轮播图效果
本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下
纯js，不使用轮播图控件怎么做轮播图呢，往下看吧
效果图：
1.可点击小圆点切换图片
2.可点击左右按钮切换图片
3.可自动播放
先上CSS和HTML代码：
<body> <div class="main"> <div class="focus fl"> <a href="javascript:;" class="arrow-l"><</a> <a href="javascript:;" class="arrow-r"> > </a> <ul> <li> <a href="#" ><img src="../02/15轮播图制作/upload/focus.jpg" alt=""></a> </li> <li> <a href="#" ><img src="../02/15轮播图制作/upload/focus1.jpg" alt=""></a> </li> <li> <a href="#" ><img src="../02/15轮播图制作/upload/focus2.jpg" alt=""></a> </li> <li> <a href="#" ><img src="../02/15轮播图制作/upload/focus3.jpg" alt=""></a> </li> </ul> <ol class="circle"> </ol> </div> </div> </body>
<style>
* {
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;
}
</style>最后就是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');
//创建自定义属性index
li.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)
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。