图片轮播

不多说直接上代码。

第一种：

css:

<style type="text/css">
   *{
      background:transparent;
      border:0;
      margin:0;
      padding:0;
   }

   ul{
      list-style-type: none;
   }

   body{
      background-color:#dfdfdf;
   }

   .maintype_left{
      margin:10px 0 0 11px;
      width:545px;
      height:260px;
   }

   .scroll_mid{
      background-color:#f2f2f3;
      border-left:solid 1px #d6d5d6;
      border-right:solid 1px #d6d5d6;
      width:535px;
      height:250px;
      padding:5px 5px 5px 5px;
      float:left;
      position:relative;
   }

   #pic{
      float:right;
      width:535px;
      height:250px;
   }

   #scroll_number{
      clear:both;
      padding-right:10px;
      display:inline;
   }

   #scroll_number li{
      width:20px;
      line-height:16px;
      text-align:center;
      border:solid 1px #999;
      margin-top:5px;
      font-size:12px;
      float:left;
   }
      
   .scroll_number_out{
      background-color:#f2f2f3;
   }
      
   .scroll_number_over{
      background-color:#F96;
      color:#FFF;
   }
   
   #lefts{
      width:120px;
      height:100%;
      background:#eee url(images/left.jpg) no-repeat left center;
      position:absolute;
      left:0;      top:0;      opacity:0.8;      display:none;  
　　 }   
　　#rights{      
　　　　width:120px;     
　　　　height:100%;    
　　　　background:#eee url(images/right.jpg) no-repeat right center;      
　　　　position:absolute;      
　　　　right:0;      
　　　　top:0;     
　　　　display:none;      
　　　　opacity:0.8;   
　　　}
</style>

html:
<div class="maintype_left">
   <div class="scroll_mid">
      <img src="images/pic_1.jpg" id="pic" />
      <ul id="scroll_number">
         <li class="scroll_number_over" onMouseOver="show(1)" onMouseOut="start()">1</li>
         <li onMouseOver="show(2)" onMouseOut="start()">2</li>
         <li onMouseOver="show(3)" onMouseOut="start()">3</li>
         <li onMouseOver="show(4)" onMouseOut="start()">4</li>
         <li onMouseOver="show(5)" onMouseOut="start()">5</li>
         <li onMouseOver="show(6)" onMouseOut="start()">6</li>
      </ul>
      <div id="lefts"></div>
      <div id="rights"></div>
   </div>
</div>

js:

<script>
   var index=1;  //图片的索引
   var time;  //定时器
   time=window.setInterval("show()",1000);
   function show(id){
      if(Number(id)){
         //鼠标移入事件
         clearInterval(time);
         index=id;
      }else{
         //循环，取总共图片的个数，取余
         index=index%6+1;
      }
      //设置图片
      document.getElementById("pic").setAttribute("src","images/pic_"+index+".jpg");
      var lis=document.getElementsByTagName("li");
      for(var i=0;i<lis.length;i++){
         lis[i].setAttribute("class","scroll_number_out");
         if(index==i+1){
            lis[i].setAttribute("class","scroll_number_over");
         }
      }
   }
   function start(){
      time=window.setInterval("show()",1000);
   }
</script>

第二种：jquery
html:

<div class="box">
    <div class="pic">
            <a class="pic-a">
                <img class="theImg" src="images/pic_1.jpg">
            </a>
            <a class="pic-a">
                <img class="theImg" src="images/pic_2.jpg">
            </a>
            <a class="pic-a">
                <img class="theImg" src="images/pic_3.jpg">
            </a>
    </div>
    <ul class="words">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

css

.box{
    width:600px;
    height:600px;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:0 auto;
    overflow: hidden;
}
.pic{
    width:1800px;
    height:600px;
    float:left;
    position:relative;
}
.pic .pic-a{
    width:600px;
    height:600px;
    float:left;
}
.theImg{
    width:600px;
    height:600px;
}
.words{
    width:150px;
    height:30px;
    list-style: none;
    position: absolute;
    top:570px;
    left:250px;
}
.words li{
    width:20px;
    height:20px;
    text-align: center;
    cursor:pointer;
    margin-left:10px;
    border:1px solid black;
    border-radius: 10px;
    float: left;
}
.on{
    background: #FF9966;
}

js:

$(function(){
    var thePic=$(".pic");

    var theLI=$(".words li");

    var iNow=0;
    var timer=null;  //定义的自动轮播

    theLI.mouseover(function(){
        theLI.attr("class","");   //这里设置的是下面的索引样式变化
        $(this).attr("class","on");
        //停止上个未完成的动画
        thePic.stop().animate({left : -600 * $(this).index()},1000);
        iNow = $(this).index();
    });

    $(".box").mouseover(function(){
        clearInterval(timer);
    }).mouseout(function(){
        timer = setInterval(toRun,3000);
    });
    timer = setInterval(toRun,3000);
    function toRun(){
        if(iNow == theLI.length-1){
            iNow = 0;
        }
        else{
            iNow++;
        }
        theLI.attr('class','');
        theLI.eq(iNow).attr('class','on');
        thePic.stop().animate({left : -600 * iNow},1000);
    }
});