jQuery 图片切换响应键盘关联标题_over键切换图片-优快云博客

// JavaScript Document By Trance

$(document).ready(function(){

var t=false; //定时器
var time=5000; //切换间隔
var speed=500; //滚动时间
var fot=300; //淡出时间
var fin=300; //淡入时间
var i=0; //起始序列这个变量将贯穿整个程序来控制要显示的序列
var len=$(“#list li”).length; //滚动内容个数
var wh=330; //每个滚动内容的宽度

$(“#info”).css({“width”: wh*len + “px”}); //初始化滚动容器的宽度
//标记当前函数
function cur(ele,currentClass){
ele= $(ele)? $(ele):ele;
ele.addClass(currentClass).siblings().removeClass(currentClass);
}

$(“#prev”).click(function(){    //左翻按钮点下调用roll() 函数左翻
roll(-1);
})

$(“#next”).click(function(){    //右翻按钮点下调用roll() 函数右翻
roll(1);
})

$(“#list li”).mouseover(function(){ // 新闻列表项目划过
checkfade(); //检查并初始化淡入淡出
i=$(“#list li”).index($(this)[0]); //将 i 变为划过的序列
if(!$(this).hasClass(“cur”)){ //如果已经是当前的序列就不再执行fade() 函数
fade(i);
}
cur(this,”cur”);
})
//滚动函数滚动效果的关键函数有一个参数j 通过传入值 -1 或者 1 来控制容器的位置
function roll(j){
checkroll(); //检查并初始化滚动条件
if(!$(“#info”).is(“:animated”)){ // 预防多次处罚滚动引起的杂乱必须在没有执行动画的时候执行以下内容
i+=j;      // i的值因传入的 j 而改变
if(i!=-1 && i!=len){    //普通的情况
$(“#info”).animate({“left” : -(wh*i)+”px”},speed);   //控制#info 也就是容器的 x 坐标来实现动画翻转
}else if(i==-1){ // 当翻到第一个时自动转到最后以形成循环
i=len-1;
$(“#info”).css({“left” : -(wh*(i-1))+”px”}); //先将容器位置定到需要滚动一个宽度才能到达的地方
$(“#info”).animate({“left” : -(wh*i)+”px”},speed);      //再执行滚动就形成了模拟正常的滚动
}else if(i==len){     //与上一个环节一样不过这个是滚到最后一个向第一个翻转
i=0;
$(“#info”).css({“left” : -wh+”px”});
$(“#info”).animate({“left” : 0+”px”},speed);
}
cur($(“#list li”).eq(i) , “cur”);    //别忘记标记相应列表项目
}
}

//Fade 函数是渐入渐出的切换效果函数
function fade(k){
checkfade();
$(“#info”).find(“div:visible”).fadeOut(fot,function(){
$(“#info”).find(“div”).eq(k).fadeIn(fin)
})
}

//检查并且初始化滚动
function checkroll(){
if($(“#info”).find(“.hide”).html()){ //如果#info 里面有隐藏的元素则让它们都显示并且初始化容器宽度
$(“#info”).find(“div”).removeClass(“hide”).show();
$(“#info”).css({“left” : -(wh*i)+”px”});
}
}
//检查并且初始化Fade
function checkfade(){
if(!$(“#info”).find(“.hide”).html()){ //如果没有隐藏的元素则隐藏除了当前序列的div 的其他所有元素并初始化容器位置
$(“#info”).find(“div”).not($(“#info”).find(“div”).eq(i)).addClass(“hide”);
$(“#info”).css({“left” : 0+”px”});
}
}

//自动执行
function setInt(){ //周期函数
t=setInterval(function(){roll(1)},time);
}
function clearInt(){ //取消周期的函数
if(t) clearInterval(t);
}

$(“#area”).hover( //鼠标放进去的时候就取消掉自动播放
function(){ clearInt() },
function(){ setInt() }
)

//响应键盘的上下左右键
$(document).keydown(function(event){
event = event || window.event;
if(event.keyCode==38 || event.keyCode==37){
clearInt();
roll(-1);
setInt();
};
if(event.keyCode==40 || event.keyCode==39){
clearInt();
roll(1);
setInt();
};
})

//开始自动页面加载完毕开始自动
setInt();

})