基于jquery的简单图片轮播----banner

主要用到的几个JQUERY函数：

li:nth-child(2) 第二张图的意思；

attr() 方法设置或返回被选元素的属性值。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

先看代码

<!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>带缩略图按钮控制图片左右滑动切换代码_js代码网</title>
<meta name="keywords" content="带缩略图按钮控制图片" />
<meta name="description" content="jQuery带缩略图按钮控制图片左右滑动切换代码。" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="play" id="play">
    <a href="javascript:" id="next">>><div class="nextImg"><img width="80" height="54" src="" /></div></a>
    <a href="javascript:" id="prev"><<<div class="prevImg"><img width="80" height="54" src="" /></div></a>
    <ol></ol>
    <ul>
        <li><a href="http://www.jsdaima.com/"><img src="images/1.jpg" alt="17素材1" /></a></li>
        <li><a href="http://www.jsdaima.com/"><img src="images/2.jpg" alt="17素材2" /></a></li>
        <li><a href="http://www.jsdaima.com/"><img src="images/3.jpg" alt="17素材3" /></a></li>
    </ul>
</div>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
    var oDiv = $("#play");  //外部盒子
    var count = $("#play ul li").length;  //内部图片数量
    var countwidth = $("#play ul li").width();  //图片边框宽度
    var oUl = $("#play ul").css("width",count*countwidth);  //ul li总宽度
    var now = 0;
    var next = $("#next");
    var prev = $("#prev");
    //点击按钮数量
    for(var i = 0; i < count; i++){
        $("#play ol").append("<li>" + Number(i+1) + "</li>");
        $("#play ol li:first").addClass("active");
    }
    //左右点击图片获取
    var nI = $("#play ul li:nth-child(2)").find("img").attr("src");//nth-childer  函数
    $(".nextImg img").attr("src",nI);
    var pI = $("#play ul li:last-child").find("img").attr("src");
    $(".prevImg img").attr("src",pI);
    //按钮点击事件
    var aBtn = $("#play ol li");
    aBtn.each(function(index){
        $(this).click(function(){
            clearInterval(timer);
            tab(index);
            nextImg();
            prevImg();
            timer=setInterval(autoRun,2000);
        });
    });
    //图片循环事件
    function tab(index){
        now = index;
        aBtn.removeClass("active");
        aBtn.eq(index).addClass("active");
        oUl.stop(true,false).animate({"left":-countwidth * now},400);
    }
    //下一张按钮图片切换
    function nextImg(){
        var d = $("#play ul li").find("img").eq(now+1).attr("src");
        var nI = $("#play ul li:nth-child(1)").find("img").attr("src");
        $(".nextImg").find("img").attr("src",d);
        if(now==count-1){
            $(".nextImg").find("img").attr("src",nI);
        }
    }
    //上一张图片按钮切换
    function prevImg(){
        var f = $("#play ul li").find("img").eq(now-1).attr("src");
        $(".prevImg").find("img").attr("src",f);
    }
    
    //下一张点击事件
    next.click(function(){
        clearInterval(timer);
        now++;
        if(now==count){
            now=0;
        }
        tab(now);
        nextImg();
        prevImg();
        timer=setInterval(autoRun, 2000);
    });
    //上一张点击事件
    prev.click(function(){
        clearInterval(timer);
        now--;
        if(now==-1){
            now=count-1;
        }
        tab(now);
        nextImg();
        prevImg();
        timer=setInterval(autoRun, 2000);
    });
    //自动轮播定义
    function autoRun(){
        now++;
        if(now==count){
            now=0;
        }
        tab(now);
        nextImg();
        prevImg();
    };
    var timer=setInterval(autoRun, 2000);
});
</script>

</body>
</html>

首先是一个大盒子，里面三张图片，然后显示的只是其他三分之一中间的位置，其他部分是被隐藏的，通过animate方法，从隐藏的地方把其他的拉出来

这段代码的核心就下面这句话了：

oUl.stop(true).animate({"left":-countwidth * now},400)

注意那个*now 时间是变的