zoukankan      html  css  js  c++  java
  • 图片点击轮播加自动轮播

    <script>
    i=0                                      //定义个变量i
     a[1].onclick=function (){     //点击事件执行方法
      i++                                      //点击一次让变量加1
      if(i==b.length){                    //判断变量i是否达到最大长度(最大长度==需要轮播的图片最大数)
       i=0                                     //如果==最大数,则让i=0;
      }
      for(var j=0;j<b.length;j++){ //for循环,遍历需要轮播的图片,实现图片的初始化
       b[j].className=""              
       c[j].className=""
      }
      b[i].className="c"            //点击一次,给图片加个class名(控制图片的样式)
      c[i].className="li"
     }
     
     
     a[0].onclick=function (){ //点击另一个按钮,原理同上。
      i=i-1
      if(i<0){
       i=b.length-1
      }
      for(var j=0;j<b.length;j++){
       b[j].className=""
       c[j].className=""
      }
      b[i].className="c"
      c[i].className="li"
     }
      for(j=0;j<c.length;j++){
       c[j].index=j
      c[j].onmouseover=function(){
       for(var k=0;k<c.length;k++){
        b[k].className=""
        c[k].className=""
       }
       b[this.index].className="c"
       c[this.index].className="li"
       i=this.index;
      
     
      }
     }
     abc=setInterval(a[1].onclick,2000); //添加定时器,实现自动轮播
     d.onmouseover=function(){             //移入事件,停止定时器
      clearInterval(abc)
     }
     d.onmouseout=function (){              //移出事件,开启定时器。
      abc=setInterval(a[1].onclick,2000)
     }
     
     
      
     
    </script>
  • 相关阅读:
    Spring Bean(一)
    Spring IOC(一)
    三种常用的查找算法
    分布式架构的一致性
    Java内存区域笔记(一)
    分组交换和电路交换
    Python说文解字_Python之多任务_03
    Python说文解字_Python之多任务_02
    Python说文解字_Python之多任务_01
    Python说文解字_杂谈09
  • 原文地址:https://www.cnblogs.com/fw282204258/p/10233120.html
Copyright © 2011-2022 走看看