甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

利用原生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://chengdu.cdxwcx.cn/article/ddcgih.html

    其他资讯