<!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>
<script src="js/jquery-1.4.4.min.js" language="javascript" type="text/javascript"></script>
<style type="text/css">
.box div a img {
    max-width:300px;
    width:300px;
    width:expression_r(document.body.clientWidth>300?"300px", "auto");
    overflow:hidden;
    height:240px;
}
.box .show {
    display:block;
}
.num span {
    padding:0 5px;
}
.fontsty{
    font-weight:bold;
    color:red;}
</style>
<script type="text/ecmascript" language="javascript">
    $(function(){
        var i=0;
        var timeInterval = 3000;  /*延迟3秒*/
        var $div=$(".box>div");
        var $span=$(".num>span");
        /*第一个div 显示，其余隐藏*/
        $div.hide();
        $($div[0]).show();        
        /*自动切换函数*/
        function auto(){
            i<$div.length-1?i++:i=0;
            $div.eq(i).show().siblings().hide();   /*siblings 同级元素隐藏除去i等于div中的索引*/
            $span.eq(i).addClass("fontsty").siblings().removeClass("fontsty");    /*span中的样式显示与隐藏*/
        }    
        set = window.setInterval(auto,timeInterval);  /*在指定的timeInterval内，调用auto函数*/
        /*鼠标移上去事件*/
        $span.mouseover(function(){
            window.clearInterval(set); /*clearInterval(set)方法可取消由setInterval()设置的 timeout。*/
            i=$(this).index();
            $div.eq(i).show().siblings().hide(); 
            $span.eq(i).addClass("fontsty").siblings().removeClass("fontsty"); 
            set = window.setInterval(auto,timeInterval);  /*重新调用auto函数*/
        });    
    })
</script>
</head>

<body>
<!--切换的图片-->
<div class="box">
  <div><a href="#"><img  src="img/1.jpg"/></a></div>
  <div> <a href="#"><img src="img/2.jpg" /></a></div>
  <div><a href="#"><img src="img/3.jpg" /></a></div>
  <div><a href="#"><img src="img/4.jpg" /></a></div>
  <div><a href="#"><img src="img/5.jpg" /></a></div>
  <div><a href="#"><img src="img/6.jpg" /></a></div>
  <div><a href="#"><img src="img/7.jpg" /></a></div>
  <div><a href="#"><img src="img/8.jpg" /></a></div>
</div>
<!--数字-->
<div class="num">
    <span class="fontsty"><a href="#">1</a></span>
    <span><a href="#">2</a></span>
    <span><a href="#">3</a></span>
    <span><a href="#">4</a></span>
    <span><a href="#">5</a></span>
    <span><a href="#">6</a></span>
    <span><a href="#">7</a></span>
    <span><a href="#">8</a></span>
   </div>
</body>
</html>
数据换成图片同理