HTML5显示图片后下一张,菜鸟求助，jquery增加点击显示上一张图片 下一张图片时间...

$(function() {

$(".imgs_bg").css("opacity","0.6"); //页面加载完成后先设置按钮后的半透明背景

$(".imgs li").each(function() { //对按钮遍历操作

$(this).css("opacity","0.6"); //设置每个按钮的不透明度0.6

}).hover(function() {

$(this).addClass("msenter").stop(true).animate({opacity:1}); //按钮鼠标经过时完全不透明

},function() {

$(this).removeClass("msenter").stop(true).animate({opacity:0.6}); //按钮鼠标滑出时恢复0.6的不透明度

});

var len = $(".imgs li").length; //获取焦点图中的图片总数

var index = 0; //图片索引值默认为0

var picTimer; //声明一个时间变量备用

$(".imgs li").click(function() { //按钮的鼠标单击事件

index = $(".imgs li").index(this); //获取到被单击按钮的索引值(顺序)

showPic(index); //通过showPic()函数显示该索引值的图片

}).eq(0).click(); //初始化，默认显示索引值为0(第一张)的图片

$(".imgb").hover(function() {

clearInterval(picTimer); //鼠标经过大图片时停止自动播放

},function() {

picTimer = setInterval(function() {

showPic(index); //鼠标滑出时根据当前索引值继续自动播放

index++; //设置索引值为下一张图片

if(index==len) {index=0;} //如果索引值等于图片总数，下一次显示第一张图片

},3000);

}).trigger("mouseleave"); //初始化，触发鼠标滑出事件，即自动播放

var bIsFirst=true;

$("div.prev").click(function(){

if(bIsFirst){

index-=2;

bIsFirst=false;

if(index<0) {index=len-1;}}

showPic(index);

index--;

if(index==-1){index=len-1;}});

$("div.next").click(function(){

//clearInterval(picTimer);

showPic(index);

index++;

if(index==len){index=0;}});

function showPic(index) {

$(".imgb li").removeClass("selected").eq(index).addClass("selected"); //根据index变量(索引值)给相应的大图添加selected的类，并移除其它大图的selected类

$(".imgs li").removeClass("selected").eq(index).addClass("selected");//根据index变量(索引值)给相应的按钮添加selected的类，并移除其它按钮的selected类

}

});