轮播图

```

1.

$(function () {

var index = 0;

var timer = null;

$('.continer').mouseover(function () {

$('.control').css('display','block');

clearInterval(timer);

}).mouseout(function () {

$('.control').css('display','none');

timer = setInterval(scroll,1000);

});

timer = setInterval(scroll,1000);

function scroll() {

index++;

if(index>4) {

index = 0;

}

scrollImgAndRound(index);

}

$('.round>li').mouseover(function () {

scrollImgAndRound($(this).index());

index = $(this).index();

});

$('#controlLeft').click(function () {

index--;

if (index<0){

index = 4;

}

scrollImgAndRound(index);

});

$('#controlRight').click(function () {

index++;

if(index>4){

index = 0;

}

scrollImgAndRound(index);

});

function scrollImgAndRound(index) {

$('.scrollImage>li').eq(index).css('display','block').siblings().css('display','none');

$('.round>li').eq(index).css('background','#222').siblings().css('background','#878787');

}

});

2,

$(function(){

$('.visualCon>ol>li').each(function(i,ele){

$(ele).click(function(){

$(ele).show().css('background-color','#000').siblings().css('background-color','#ccc');

$('.visualCon>ul>li').eq($(this).index()).show().stop().animate({'left':0},300);

$('.visualCon>ul>li').eq($(this).index()).prevAll().each(function(i,ele){

$(ele).stop().animate({'left':'-'+(i+1)*100+'%'},300);

});

$('.visualCon>ul>li').eq($(this).index()).nextAll().each(function(i,ele){

$(ele).stop().animate({'left':(i+1)*100+'%'},300);

});

});

});

});

```