基于Jquery的焦点图切换源码分析

本帖最后由 cust0811 于 2012-05-13 22:54:10 编辑

解决方案 »

  1.   

    <!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 runat="server">
      <title>无标题页</title>
      <LINK rel=Stylesheet type=text/css href="css/1.css">
      <script src="js/jquery.js" type="text/javascript"></script>
    </head>
    <body>
      <div id="top"> 
      <ul>
      <li class="cc"><img src="img/1.jpg"/></li>
      <li><img src="img/2.jpg"/></li>
      <li><img src="img/3.jpg"/></li>
      <li><img src="img/4.jpg"/></li>
      <li><img src="img/5.jpg"/></li>
      </ul></div>
      <input type="button" value="Hide" id="ck" />
      <input type="button" value="Show" id="sk" />
      <script type="text/javascript">
      $("#ck").click(
      function(){
      $("#top").hide(500,function(){
      alert("1321");});});
      $(document).ready(function(){
      function callback(){alert("动画执行完毕");}
      $("#sk").click(
      function(){$("#top").show();}
      );});
      
      
      setInterval(roll,1000);
      
      var count = 1;
      function roll(){
      if(count == $("#top ul li").length){
      count = 1;
      }else{
       count++;
      }
      $("#top ul li").hide();
      $("#top ul li").eq(count-1).fadeIn();
      }
    </script>
    </body>
    </html>
    <style>
    #top
    {
    width:480px;
    height:200px;
    border:1px solid #ccc;
    position:relative;
    text-align:center;
    margin:auto;
    overflow:hidden;
    }
    #top ul
    {
    margin:0px;
    border:0;
    padding:0px; 
    margin-left:0px;
    list-style-type:none;
    }#top ul li
    {
    padding:0px;
    margin-left:0px;
    display:none;
    }
    #top ul li.cc
    {
    display:block;
    }
    </style>