自己做的最简单的轮播图

/*-------------------定义函数---------------------*/
//轮播图
changeImg =  function(){
var index = $(".focus > a.active").index();
if (index === 3 || index ===-1) {
index = 0;
}
$(".focus > a").removeClass("active").eq(index).addClass("active");
$(".small-tabs > li").removeClass("active").eq(index).addClass("active");
$(".focus > p").removeClass("active").eq(index).addClass("active");
};

//切换图片
var int = setInterval("changeImg()", 2000);
$(".small-tabs li").click(function(){
clearInterval(int);
var index = $(this).index();
console.log(index);
$(".focus > a").removeClass("active").eq(index).addClass("active");
$(".small-tabs > li").removeClass("active").eq(index).addClass("active");
$(".focus > p").removeClass("active").eq(index).addClass("active");
$(".focus").delay(2000);
int = setInterval("changeImg()", 2000);
});

<div class="focus">
<h5>焦点</h5>
<a href="javascript:;" class="active"><img src="$link.contextPath/assets/img/front/frontHome/info/sample1.jpg" title="focus" alt="focus"></a>
<a href="javascript:;"><img src="$link.contextPath/assets/img/front/frontHome/info/sample2.jpg" title="focus" alt="focus"></a>
<a href="javascript:;"><img src="$link.contextPath/assets/img/front/frontHome/info/sample3.jpg" title="focus" alt="focus"></a>
<p class="active"><a href="javascript:;">访谈：一带一路</a></p>
<p><a href="javascript:;">访谈：哥本哈根</a></p>
<p><a href="javascript:;">访谈：耶路撒冷</a></p>
<ul class="small-tabs clearfix">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>