Code

Carousel javascript jquery plugin
图片滚动，带左右箭头，底下带小圆圈，可控制图片滚动
CarouFredSel是一个内容无限循环播放容器jQuery，可以展示任何类型的HTML元素。支持水平和垂直两个方向。项目的高度和宽度可以不相同。可以利用向前/向后按纽播放项目或设置成自动播放。
效果预览
basketball beachtree cupcackes hangmat new york laundry mom son picknick shoes paris sunbading yellow couple
代码
1.在body里加入如下HTML代码：

<div class="carouFredSel_ImgList">
    <!--上一个按钮-->
    <a class="prev" id="foo1_prev" href="#"><span>prev</span></a>
    <!--内容区-->
    <div id="foo1">
        <a href="#">
            <img src="images/basketball.jpg" alt="basketball" width="100" height="100" /></a>
        <a href="#">
            <img src="images/beachtree.jpg" alt="beachtree" width="100" height="100" /></a>
        <a href="#">
            <img src="images/cupcackes.jpg" alt="cupcackes" width="100" height="100" /></a>
        <a href="#">
            <img src="images/hangmat.jpg" alt="hangmat" width="100" height="100" /></a>
        <a href="#">
            <img src="images/new_york.jpg" alt="new york" width="100" height="100" /></a>
        <a href="#">
            <img src="images/laundry.jpg" alt="laundry" width="100" height="100" /></a>
        <a href="#">
            <img src="images/mom_son.jpg" alt="mom son" width="100" height="100" /></a>
        <a href="#">
            <img src="images/picknick.jpg" alt="picknick" width="100" height="100" /></a>
        <a href="#">
            <img src="images/shoes.jpg" alt="shoes" width="100" height="100" /></a> <a href="#">
                <img src="images/paris.jpg" alt="paris" width="100" height="100" /></a>
        <a href="#">
            <img src="images/sunbading.jpg" alt="sunbading" width="100" height="100" /></a>
        <a href="#">
            <img src="images/yellow_couple.jpg" alt="yellow couple" width="100" height="100" /></a>
    </div>
    <!--下一个按钮-->
    <a class="next" id="foo1_next" href="#"><span>next</span></a>
    <!--清除浮动-->
    <div class="clearfix">
    </div>
    <div class="pagination" id="foo2_pag">
    </div>
</div>
2.在head标签内加入css文件：

<style type="text/css">
    .carouFredSel_ImgList
    {
	    width:780px;
	    margin:0 auto;
    }
    .caroufredsel_wrapper
    {
	    float: left;
	    display: inline;
	    margin: 0 5px;
    }
    #foo1 a
    {
	    border: 1px solid #ccc;
	    background-color: white;
	    padding: 9px;
	    margin: 7px;
	    display: inline;
	    float: left;
    }
    #foo1 a:hover
    {
	    border: 1px solid #9e1f63;
    }
    #foo1 img
    {
	    border: 0;
    }
    a.prev, a.next
    {
	    background: url(../images/miscellaneous_sprite.png) no-repeat transparent;
	    width: 45px;
	    height: 50px;
	    display: block;
	    float: left;
	    display: inline;
	    margin-top: 40px;
    }
    a.prev
    {
	    background-position: 0 0;
    }
    a.prev:hover
    {
	    background-position: 0 -50px;
    }
    a.next
    {
	    background-position: -50px 0;
    }
    a.next:hover
    {
	    background-position: -50px -50px;
    }
    a.prev span, a.next span
    {
	    display: none;
    }
    .clearfix
    {
	    float: none;
	    clear: both;
    }

    .pagination {
    height:15px;
    padding:0 40px 10px 0;
    text-align:center;
    }

    .pagination a {
	    background: url(../images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
	    width: 15px;
	    height: 15px;
	    margin: 0 5px 0 0;
	    display: inline-block;
    }
    .pagination a.selected {
	    background-position: -25px -300px;
	    cursor: default;
    }
    .pagination a span {
	    display: none;
    }
</style>
3.在head里引入js文件：

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquery.carouFredSel.js" type="text/javascript"></script>
4.继续在head里加入js代码：

<script type="text/javascript">
    $(function() {
        $(function() {
            $("#foo1").carouFredSel({
                auto: false,
                prev: "#foo1_prev",
                next: "#foo1_next",
                pagination: "#foo2_pag"
            });
            //去除按钮点击后虚线
            $("#foo1_prev,#foo1_next").click(function() {
                $(this).blur();
            });
        });
    })
</script>
5.参数列表：
参数名 默认值 说明
circular true 循环模式，true为无限循环，false为单轮循环。
infinite true 是否启用循环，默认起用。当circular设置为false的时候，再把infinite设置为false，就可以关闭循环。
direction "left" 滚动方向，可选值："right", "left", "up" , "down".
width null 内容的宽度，如果为null，宽度自动计算
height null 内容的高度，如果为null，高度自动计算
padding 0 内容区域的padding
items 5 显示个数。默认显示5个。
scroll 默认等于显示的个数 一次滚动个数。
auto true 是否自动播放。设置成false，不自动播放。
prev null 指定某一元素控制内容向前
next null 指定某一元素控制内容向后
Drew Wilson Network