zoukankan      html  css  js  c++  java
  • JQ简单图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    p.now{ display:block; border:1px solid #ccc}
    li.now{ color:red}
    li{ list-style:none;float:left; padding:0 10px; border:1px solid #ccc}
    #fd{position:absolute; left:100px; top:100px;height:20px; width:600px; background:#ccc}
    </style>
    </head>
    <body>
    <div id="fd">
    <p class="now">1</p>
    <p style="display:none">2</p>
    <p style="display:none">3</p>
    <p style="display:none">4</p>
    <ul>
    <li class="now">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    </div>
    <script>
    function $(id){return document.getElementById(id)}//获取ID节点的简介方法
    var tags=$("fd").getElementsByTagName("li");//获取切换按钮节点
    var cats=$("fd").getElementsByTagName("p");//获取切换内容节点
    var current;//设置当前帧的变量容器
    var timer=3000;//  
    function disAll(){//初始所有标签样式
     for(var i=0; i<tags.length; i++){
           tags[i].className="";
           cats[i].className="";
        cats[i].style.display="none";
         }
      }
    function setNow(){//获取当前帧的索引值
      for(var i=0; i<tags.length; i++){
        if(tags[i].className=="now"){
              current=i;    
             }
       } 
    }
    for(var j=0; j<tags.length; j++){//设置手动切换
        tags[j].onmouseover=function(){
        clearInterval(h);  
         disAll();   
          this.className="now";
        setNow();
         cats[current].style.display="block";
         cats[current].className="now";   
          }
       tags[j].onmouseout=function(){
             setNow();    
              h=setInterval("goNext()",3000);
          }
        }
    function goNext(){//自动切换
       setNow();//获取当前帧索引
       current+=1;//帧自增1
      if(current>=parseInt(tags.length)){//判断:如果当前帧索引值是否大于切换按钮总数,如果大于按钮总数则回到初始状态
        current=0;
          disAll();
           cats[0].style.display="block";
            tags[0].className="now";
             cats[0].className="now";
            }
        else{
           disAll();
           cats[current].style.display="block";
           cats[current].className="now";
           tags[current].className="now";
       }
    }
    var h=setInterval("goNext()",timer)//开始自动切换
    </script>
    </body>
    </html>
  • 相关阅读:
    insert into output使用
    内插字符串$与复合格式设置{}
    网站连接数据库连接不上原因是ip地址与端口号格式不对
    IIS中的MIME类型设置
    select distinct
    复制表备份表的问题
    一些碎知识
    题解【洛谷P3574】[POI2014]FAR-FarmCraft
    题解【洛谷P6029】[JSOI2010]旅行
    题解【BZOJ4472】[JSOI2015]salesman
  • 原文地址:https://www.cnblogs.com/zywf/p/4546834.html
Copyright © 2011-2022 走看看