利用原生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://myzitong.com/article/ddcgih.html

    其他资讯