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>
  • 相关阅读:
    冒泡排序
    数据结构和算法关系
    js获取ifram对象
    java STL
    bufferedReader 乱码问题
    css animation让图标不断旋转
    apply通过实例理解
    jquery.ajaxfileupload.js
    JDBC getMetaData将结果集组装到List
    Android开发之使用BaseAdapter的notifyDataSetChanged()无法更新列表
  • 原文地址:https://www.cnblogs.com/fw282204258/p/10233120.html
Copyright © 2011-2022 走看看