paperen以前弄的那个图片转换太失败了，有看代码的会发现是更换了img的src值来改变图片，而html代码中也只有一张图片（<IMG src="i.jpg" ?="" />），而这样的缺点就是要等待图片完全下载完才能切换出来，明显的表现是在网速不理想下点击切换按钮时不能马上转换图片而是要等待一定时间。所以paperen我觉得还是要在html中先所有图片都放出来然后用css隐藏一部分图片来制造这种效果是最理想的，其实这个方法也不是我想出来的，你随便找个有js滑动图片的网站看源代码都是将所有图片事先放出来的，因为这样会先下载图片，即使你只能看到一张图片。

http://paperen.com/demo/imageslider/

1.HTML结构

<div class="container">
  <div class="imgbox">
   <div class="imgshowbox">
    <img src="1.png" id="img_1" title="" alt="" />
    <img src="2.png" id="img_2" title="" alt="" />
    <img src="3.png" id="img_3" title="" alt="" />
    <img src="4.png" id="img_4" title="" alt="" />
   </div>
  </div>
  <div class="c"></div>
  <ul class="imgnav">
   <li><a href="#" class="active" rel="1"></a></li>
   <li><a href="#" rel="2"></a></li>
   <li><a href="#" rel="3"></a></li>
   <li><a href="#" rel="4"></a></li>
  </ul>
 </div>

2.CSS

*{margin:0px;padding:0px;}
body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;}
.container{}
.c{clear:both;}
ul,li{list-style:none;}
a{text-decoration:none;color:#666666;}
.imgbox{width:900px;height:300px;overflow:hidden;position:relative;}
.imgshowbox{position:absolute;top:0;left:0;width:3600px;}
.imgshowbox img{float:left;}
.imgnav{float:left;}
.imgnav li{float:left;margin:5px;list-style:none;}
.imgnav li a{background:url(btn.jpg) no-repeat;width:12px;height:12px;display:block;}
.imgnav li a.active{background-position:-12px 0px;}

imgbox的超出部分设为隐藏并为相对，这样的话就会隐藏里面对齐方式是绝对的imgshowbox超出来的图片。

3.引入jquery框架文件

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

4.完成动作与效果

$(document).ready(function(){
  $(".imgnav a").click(function(){
    var num=($(this).attr('rel')-1)*(-900);
    $(".imgshowbox").animate({left:num},500);
    $(".imgnav a").removeClass('active');
    $(this).addClass("active");
  });
});

如果对比一下paperen前几天那篇《很早之前偷的图片转换效果js》中的那个js代码而言这里做出来的效果与那个效果相差无几，但是对比一下代码你会发觉哪一个的代码更加有优势。这里paperen我没有将效果做全，定时切换的效果留给你自己去做吧，自己动手丰衣足食嘛，不要那么懒，还有我还没有给图片加上超链接自己可以根据自己需要修改一下，毕竟也不难懂，而且我相信还可以将这个效果封装得更完美，比如css中imgshowbox的宽度3600px，你完全可以用js先获取第一张图片的宽度然后才改变这个3600px的值，而不是写死在css中，这样的话当图片不是900px宽时就又得改css了，很明显这里自己封装得太垃圾了，灵活性不够强大，不过这个光荣的任务就交给你吧，弄好了也发一份我看看吧。