其实这也是幻灯片功能，通过js的setInterval方法，在指定时间间隔内反复调用某函数。这个“某函数”我们可以写成一个几个同级div列表或者同级li列表的显示/隐藏，比如在5000毫秒的间隔下反复显示/隐藏这个列表中的各个标签就能达到类似幻灯片自动切换的功能。

首先我通过上一篇的主函数输出了一个文章列表，列表的结构如下：

<div class="slider_post">
    <div class="slider_content"></div>
    <div class="slider_content"></div>
    <div class="slider_content"></div>
</div>

其中的<div class="slider_content"></div>就是以列表形式展现出来的结构。我们可以通过js控制来让它显示其中一个时，其他的隐藏。

下面的代码分成三部分，第一部分是鼠标悬停时停止切换，鼠标移开时恢复；第二部分为自动切换；第三部分为手动切换（当然你先要加一个按钮，下面绑定的是slider_nav这个类）

$(function() { // 自动切换
    var o = 0;
    var timeInterval = 2000;
    var $cont = $(".slider_post .slider_content");
    $('#slider').mouseover(function(){ // 鼠标悬停时清除setInterval方法
        clearTimeout(set);
    });
    $("#slider").mouseout(function(){ // 鼠标移开时使用setInterval方法
        set = window.setInterval(auto, timeInterval);
    });
    $cont.hide(); // 隐藏整个列表
    $($cont[0]).show(); // 显示列表第一个子元素
    function auto() { 
        o < $cont.length - 1 ? o++:o = 0; // o是否小于列表数-1 ，如果是则 o++ ，否则o值为0
        $cont.eq(o).fadeIn(800).siblings().hide(); // 当前列表子元素显示，其他同辈子元素隐藏
    }
    set = window.setInterval(auto, timeInterval); // 使用setInterval方法让auto函数在指定时间间隔内执行一次
    
    $('body').on('click','.slider_next',function(){ //手动切换下一页
	o < $cont.length - 1 ? o++:o = 0;
	$cont.eq(o).fadeIn(800).siblings().hide();
    });	
    $('body').on('click','.slider_prev',function(){ //手动切换上一页
	o > 0 ?  o-- : o = $cont.length-1;
	$cont.eq(o).fadeIn(800).siblings().hide();
    });
});

看注释，逻辑是很简单的。当然你也可以换成图片img列表，这样就是幻灯片了。