新手就这段jq 详细解释

g625801 2017-06-02 10:04:45
$(function(){
var same=0; //用于避免触碰到相同标签式是发生切换
var interval=5000; //图片切换时间
var timer; //计时器

/*********显示和隐藏图片************/
$("#player img").hide();
$("#player img").eq(0).show();
$("#tags img").mouseover(function(){
var tags=$("#tags img").index(this);
if(same!=tags){
$("#player img").fadeOut();
$("#player img").eq(tags).fadeIn(500);
}
same=tags;
})

/*********自动播放图片***********/
function autoplay(){
same++;
if(same>=$("#tags img").length){
same=0;
}
$("#player img").fadeOut();
$("#player img").eq(same).fadeIn(500);
}

/**********播放图片切换**************/
function play(){
timer=setInterval(autoplay,interval);
}

/**********停止图片切换**************/
function stop(){
clearInterval(timer);
}

/*****鼠标悬浮或移出时播放或停止切换图片***/
$("#content").hover(function(){
stop();
},
function(){
play();
})

play();
})
...全文
133 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
everccnight 2017-06-06
  • 打赏
  • 举报
回复
就是一个简易的淡入淡出 图片轮播图

87,993

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧