这种图片轮换的东西应该还是用的比较多的，最近写的侧边栏tab轮换、图片轮换方法都一样，有需求的就看看吧。

演示地址:http://mufeng.me/demo/imgroll

<div id="slider">
    <a href="#" title=""><img src="http://192.168.1.206/wp-content/uploads/2015/06/6115ac8ftw1dzmg00hnzbj.jpg" alt="First Picture" /></a>
    <a href="#" title=""><img src="2.jpg" alt="Second Picture" /></a>
    <a href="#" title="Third Picture"><img src="3.jpg" alt="" /></a>
    <a href="#" title="Fourth Picture"><img src="4.jpg" alt="" /></a>
    <a href="#" title=""><img src="5.jpg" alt="Last  Picture" /></a>
</div>

jQuery(document).ready(function($) {
    // 给#slider>a 加一个class
    $('#slider a').addClass('img');
     
    // 添加控制部分
    $('#slider').append('<div id="slider-nav" class="clearfix"><div id="slider-title"></div><div id="slider-control"><div id="slider-control-box" class="clearfix"><a href="#" id="slider-left">left</a><a href="#" id="slider-right">right</a></div></div></div>');
     
    var _a = $('#slider a.img'),
        _img = $('#slider a.img img');  
     
    // 将图片标题提取出来
    _a.each(function() {
        var _this = $(this),
            // a标题不存在, 就采用img的alt
            title = _this.attr("title") != "" ? _this.attr("title") : (_this.children('img').attr('alt') != "" ? _this.children('img').attr('alt') : ""),
            href = _this.attr('href');
        $('#slider-title').append('<a href="' + href + '" title="' + title + '">' + title + '</a>');
    });
    var _atitle = $('#slider-title a'),
        _sleft = $('#slider-left'),
        _sright = $('#slider-right'),
        _atTimer, _atAuto = function() {
            _sright.click()
        };
    // 图片数量>0
    if (_img.length > 0) {
        var nimg = new Image();
        nimg.onload = function() {
            // 第一幅图加载完成之后执行以下动作
            _a.eq(0).fadeIn().addClass('current');
            _atitle.eq(0).addClass('current').stop().animate({
                bottom: 0
            }, 200);
            _atTimer = setInterval(_atAuto, 2000);
        }
        nimg.src = _img.eq(0).attr('src');
     
        // 右按钮
        _sright.click(function(e) {
            e.preventDefault();
            var _this = $(this),
                _imgNow = $('#slider a.img.current'),
                _aNow = $('#slider-title a.current'),
                _index = _a.index(_imgNow),
                n = _index < (_img.length - 1) ? (_index + 1) : 0,
                _imgNext = _a.eq(n),
                _aNext = _atitle.eq(n);
            _imgNow.removeClass('current').fadeOut(300);
            _imgNext.addClass('current').fadeIn(300);
            _aNow.removeClass('current').stop().animate({
                bottom: 12
            }, 300, function() {
                $(this).css("bottom", -12)
            });
            _aNext.addClass('current').stop().animate({
                bottom: 0
            }, 300);
        });
     
        // 左按钮
        _sleft.click(function(e) {
            e.preventDefault();
            var _this = $(this),
                _imgNow = $('#slider a.img.current'),
                _aNow = $('#slider-title a.current'),
                _index = _a.index(_imgNow),
                n = _index > 0 ? (_index - 1) : (_img.length - 1),
                _imgNext = _a.eq(n),
                _aNext = _atitle.eq(n);
            _imgNow.removeClass('current').fadeOut(300);
            _imgNext.addClass('current').fadeIn(300);
            _aNow.removeClass('current').stop().animate({
                bottom: -12
            }, 300);
            _aNext.addClass('current').css("bottom", 12).stop().animate({
                bottom: 0
            }, 300);
        });
     
        // 鼠标hover状态下停止自动播放
        $('#slider').hover(
        function() {
            clearInterval(_atTimer);
            _atTimer = null;
        }, function() {
            clearInterval(_atTimer);
            _atTimer = null;
            _atTimer = setInterval(_atAuto, 2000);
        })
    }
});

转自http://mufeng.me/imgroll.html