我做的第一个JQuery图片切换，希望大家多多指教。

哈哈，第一个作品。很庆幸能成功运行啦啦代码如下：html代码：
<html>
<head><title>图片自动切换演示</title>
 <link href="./css.css" rel="stylesheet" type="text/css" />
 <script src="./jquery.min.js" type="text/javascript"></script>
 <script src="./js.js" type="text/javascript"></script>
</head>
<body>
 <div id="imgbox">
   <a href="#"><img src="./img/1.jpg" /></a>
   <a href="#"><img src="./img/2.jpg" /></a>
   <a href="#"><img src="./img/3.jpg" /></a>
   <a href="#"><img src="./img/4.jpg" /></a>
   <a href="#"><img src="./img/5.jpg" /></a>
   <a href="#"><img src="./img/6.jpg" /></a>
   <div id="num">
     <li>1</li><li>2</li>  <li>3</li><li>4</li>  <li>5</li><li>6</li>
   </div>
  </div>
</body>
</html>
JQuery代码：
$(document).ready(function(){
   var num=1;
   var pause;
   var show=function(Y){
    $('img').css({'left':'-400px'});
    $('img').eq(Y).css({'left':'0px'});
    $('li').removeClass("color");
    $('li').eq(Y).addClass("color");
   };
   var run=function(){
         show(num);
        num=(num!=5)?(num+1):0;
         pause=setTimeout(run,5000);
     };
   $('li').hover(function(event){
                   clearTimeout(pause);
                   num=$(this).text()-1;
                   show(num);  
                  },
                  function(){
                     num=(num!=5)?(num+1):0;
                    pause=setTimeout(run,2000);
                  });   
  show(0);
  pause=setTimeout(run,5000);
  });
css代码：
* {
   border:0 solid;
   margin:0;
   padding:0;
 }
#imgbox {
   border:5px;
   position:relative;
   margin:30px 0px 0px 50px;
   over-flow:hidden;
   width:300px;
   height:300px;
   z-index:2;
 }
#num {
   position:absolute;
   width:150px;
   left:170px;
   top:278px;
   z-index:3;
 }
li {
   position:relative;
   text-align:center;
   float:left;
   width:15px;
   height:10px;
   background-color:#C0C0C0;
   margin-left:5px;
    cursor:pointer;
 }   
img {
   position:absolute;
   left:-400px;
   top:0px;
   width:300px;
   height:300px;
  }
.color {
   background-color:#9ACD32;
   font-size:18px;
  }

解决方案 »

  1.   

    挺好的，有点小小的建议，li标签是不是应该和ul标签配套使用更好...
      

  2.   

    不错啊
    现在给你增加难度 不用jquery等js框架 在写一个一样的
      

  3.   

    javascript其实比较有意思，那些this  、  prototype  都挺有意思的，不过学了JQuery框架就变懒了，觉得这些框架很省事啊。不过这个效果用javascript做出来应该也不是很难，我回头自己做一下。谢谢前辈指导。另外，经常看见前辈的头像啊，哈哈。
      

  4.   

    不好意思，我这里效果很差，li的样式有问题，list-style应该设置为none，其别li的宽度高度都太小，数字超出了。
    另外，建议动态计算num的位置，这样不会导致减少图片时样式太乱。
    考虑一下增加两个效果：
    1、当鼠标移动到imgbox范围内的时候，停止自动播放，移开的时候继续自动播放，这里需要注意事件对象的判断
    2、增加一个自动播放的进度条，当停止自动播放的时候，进度条暂停，恢复自动播放的时候继续。
      

  5.   

    我这里好像没发现li有什么问题，不知道是不是浏览器的原因。关于动态计算num的问题，因为这是我用jquery写的第一个程序，所以没有注意那么多，以后会注意的。那增加的两个效果也会考虑增加的。
    总之，非常感谢您的指导。
      

  6.   

    js改了一下：
    $(document).ready(function(){
       var num=1;
       var pause;
       var sum=$('li').length-1;
       var show=function(Y){
        $('img').css({'left':'-400px'});
        $('img').eq(Y).css({'left':'0px'});
        $('li').removeClass("color");
        $('li').eq(Y).addClass("color");
       };
       var run=function(){
             show(num);
            num=(num!=sum)?(num+1):0;
             pause=setTimeout(run,5000);
         };
       $('li').hover(function(event){
                       clearTimeout(pause);
                       num=$(this).text()-1;
                       show(num);  
                      },
                      function(){
                         num=(num!=sum)?(num+1):0;
                        pause=setTimeout(run,2000);
                      });  
       $('img').hover(function(event){
                       clearTimeout(pause);  
                      },
                      function(){
                        pause=setTimeout(run,2000);
                      });  
      show(0);
      pause=setTimeout(run,5000);
      });