RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
利用原生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://lswzjz.com/article/ddcgih.html

    其他资讯

    快速导航
    友情链接
    网站建设
    联系方式
    • 企业：青羊区大橙子信息咨询工作室
    • 地址：成都市青羊区太升南路288号
    • 电话：18980820575
    • 网址：www.lswzjz.com

    公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575

    网站备案号：蜀ICP备2022028542号-13

    乐山大橙子建站 乐山网站建设 乐山网站设计 乐山网站制作 成都做网站