效果图：
html代码：
<div id="first_two">
<div id="first_two_img">
<img src="img/FristPage/scroll-01.jpg"/>
<img src="img/FristPage/scroll-02.jpg"/>
<img src="img/FristPage/scroll-03.jpg"/>
<img src="img/FristPage/scroll-04.jpg"/>
</div>
<!--<img src="img/FristPage/scroll-01.jpg"/>-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
jQ代码：
$(function(){
var time2;
var i=1;
function time1(){
time2 = setInterval(function(){
var a=$("#first_two_img img:nth-of-type("+i+")").attr("src")
$("#first_two").css("background-image","url("+a+")");
$("#first_two ul li:nth-of-type("+i+")").css("background-color","red");
$("#first_two ul li:nth-of-type("+i+")").siblings().css("background-color","#A9A9A9");
color","#A9A9A9");
i++;
if(i==5){i=1}
},1000);
};
time1();
$("#first_two ul li").hover(
function(){
var index = $(this).index();
clearInterval(time2);
i = index+1;
$("#first_two").css("background-image","url("+$("#first_two_img img:nth-of-type("+i+")").attr("src")+")");
$("#first_two ul li:nth-of-type("+i+")").css("background-color","red");
$("#first_two ul li:nth-of-type("+i+")").siblings().css("background-color","#A9A9A9");
},
function(){
time1();
}
);
})
