利用原生JavaScript编写一个轮播图效果-创新互联
今天就跟大家聊聊有关利用原生JavaScript编写一个轮播图效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
目前
创新互联已为1000多家的企业提供了网站建设、域名、
雅安服务器托管、
网站运营、企业网站设计、
安图网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
代码：
<
>
var banner = document.getElementsByClassName("banner")[0];
var slider = document.getElementsByClassName("slider")[0];
var li = slider.getElementsByTagName("li");
var btnl = document.getElementsByClassName("btnl")[0];
var btnr = document.getElementsByClassName("btnr")[0];
var tabs = document.getElementsByClassName("tabs")[0];
var btns = tabs.getElementsByTagName("li");
//初始化
btns[0].style.backgroundColor = "red";
for(var i = 0; i < li.length; i++) {
if(i == 0) {
continue;
} else {
li[i].style.opacity = 0;
}
}
var timer = setInterval(mover, 1000);
//声明一个变量，代表当前图片的下标
var num = 0;
function mover() {
num++;
if(num == li.length) {
num = 0;
}
for(var i = 0; i < li.length; i++) {
li[i].style.opacity = 0;
btns[i].style.backgroundColor = "#ccc";
}
li[num].style.opacity = 1;
btns[num].style.backgroundColor = "red";
}
function movel() {
num--;
if(num == -1) {
num = li.length - 1;
}
for(var i = 0; i < li.length; i++) {
li[i].style.opacity = 0;
btns[i].style.backgroundColor = "#ccc";
}
li[num].style.opacity = 1;
btns[num].style.backgroundColor = "red";
}
banner.onmouseover = function() {
clearInterval(timer)
}
banner.onmouseout = function() {
timer = setInterval(mover, 1000)
}
btnl.onclick = function(e) {
movel();
}
btnr.onclick = function(e) {
mover();
}
// 小圆点效果
for(var i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onmouseover = function() {
if(this.index == num) {
return;
} else {
for(var i = 0; i < li.length; i++) {
li[i].style.opacity = 0;
btns[i].style.backgroundColor = "#ccc";
}
li[this.index].style.opacity = 1;
btns[this.index].style.background="red";
num=this.index;
}
}
}
看完上述内容，你们对利用原生JavaScript编写一个轮播图效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
当前名称：利用原生JavaScript编写一个轮播图效果-创新互联
文章地址：http://kswjz.com/article/ddcgih.html
