平武建站

使用JavaScript编写一个轮播图效果-创新互联

本篇文章为大家展示了使用JavaScript编写一个轮播图效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

成都创新互联是一家专业提供滴道企业网站建设,专注与网站建设、网站设计、H5场景定制、小程序制作等业务。10年已为滴道众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

实现方法如下：





 
 
 
 
 



 
 
 
 
  
    • 
  
    • 
  
    • 
  
    • 
  
    • 
  
    • 
  
    • 
  
    • 
 
 
         
         
          
  •   
  •   
  •   
  •   
  •   
  •   
  •    
     

    js:

    window.onload = function() {
 //banner 自动播放
 var oBanner = document.getElementById('banner');
 var aLi = oBanner.getElementsByTagName('li');
 var oJumpBtn = document.getElementById('jumpBtn');
 var aBtn = oJumpBtn.getElementsByTagName('li');
 var oPreImg = document.getElementById('preImg');
 var oNexImg = document.getElementById('nexImg');
 var iNow = 0;
 var timer = null;
 for (var i = 0; i < aBtn.length; i++) {
 aBtn[i].index = i;
 aBtn[i].onclick = function() {
 iNow = this.index;
 tab();
 };
 }

 function tab() {
 for (var i = 0; i < aBtn.length; i++) {
 aBtn[i].style.background = '#ccc';
 aLi[i].style.opacity = 0;
 }
 aBtn[iNow].style.background = '#CF0F32';
 aLi[iNow].style.opacity = 1;
 }

 function tick() {
 iNow++;
 if (iNow == aBtn.length) {
 iNow = 0;
 }
 tab();
 }

 timer = setInterval(tick, 2000);

 oPreImg.onclick = function() {
 iNow--;
 if (iNow < 0) {
 iNow = aBtn.length - 1;
 }
 tab();
 };
 oNexImg.onclick = tick;

 oBanner.onmouseover = function() {
 clearInterval(timer);
 };
 oBanner.onmouseout = function() {
 timer = setInterval(tick, 2000);
 };
}

    上述内容就是使用JavaScript编写一个轮播图效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


    当前标题：使用JavaScript编写一个轮播图效果-创新互联
    当前地址：http://pwwzsj.com/article/dogcph.html

    其他资讯