<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
$(function(){
//开场显示
$('.pica').eq(0).show();
$('.yema li').eq(0).addClass('cur');
//定义指针索引
var idx = $('.yema li.cur').index();
//显示轮播图和黄色导航圈
function showAll(){
$('.pica').hide();
$('.pica').eq(idx).show();
$('.yema li').removeClass('cur');
$('.yema li').eq(idx).addClass('cur');
}
//左边按钮
$('.pre').click(function(){
idx = (idx > 0) ? idx - 1 : 4;
showAll();
});
//右边按钮
$('.nxt').click(function(){
idx = (idx < 4) ? idx + 1 : 0;
showAll();
});
//黄色导航
$('.yema li').mouseover(function(){
idx = $(this).index();
showAll();
});
//自动轮播
setInterval(function(){
idx = (idx < 4) ? idx + 1 : 0;
showAll();
}, 2500);
});
</script>
</body>
</html>