简单的图片轮换

简单的图片轮换

首先用Css 创建简单的ui

<style>
ul{ list-style:none; padding:0px; margin:0px;}
#scrollPics{ width:500px; height:200px; position:relative; overflow:hidden}
#scrollPics img{ width:500px; height:200px;}
#scrollPics .num{position:absolute;right:5px;bottom:5px;}
#scrollPics .num ul{ list-style:none;}
#scrollPics .num li{ float:left; width:20px; height:20px; border:1px #FFCC00 solid;cursor: pointer;background-color: #fff; margin-right:5px; text-align:center; font-size:12px}
#scrollPics .num li.on{  width:20px; height:20px; border:1px #FFCC00 solid;cursor: pointer; background-color:#FF6600}
</style>

在boby里插入这段代码

<div id="scrollPics">
<ul class="slide">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
<ul class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

接下来就要创建jquery动画了

<script language="javascript">
var len = $(".num  li").length;
var index=0;
var adTimer;
$(document).ready(function(){

  $(".num li").mouseover(function(){
  index=$(".num li").index(this);
  showimg(index);
  });
 
  $('#scrollPics').hover(function() {
        clearInterval(adTimer);
    }, function() {
        adTimer = setInterval(function() {
            showimg(index);
            index++;
            if (index == len) {       //最后一张图片之后，转到第一张
                index = 0;
            }
        }, 3000);
    }).trigger("mouseleave");

 
 function showimg(index){
 var adHeight=$("#scrollPics>ul>li:first").height();
     $(".slide").stop(true,false).animate({
      "marginTop":-adHeight*index+"px"
      },1000);
 $(".num li").removeClass("on").eq(index).addClass("on");
 };

});
</script>