```
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);
});
});
});
});
```
