模仿百度首頁的圖檔輪播

js代碼：

// JavaScript Document

var setint;

$(function(){

operate();

setint=setInterval("autoImg()",3000);

})

var desc=[];

function ainfo(desc,imgurl){

this.de=desc;

this.url=imgurl;

}

var a1=new ainfo("第一張圖檔","#");

desc.push(a1);

var a2=new ainfo("第二張圖檔","#");

desc.push(a2);

var a3=new ainfo("第三張圖檔","#");

desc.push(a3);

var a4=new ainfo("第四張圖檔","#");

desc.push(a4);

var a5=new ainfo("第五張圖檔","#");

desc.push(a5);

var a6=new ainfo("第六張圖檔","#");

desc.push(a6);

var a7=new ainfo("第七張圖檔","#");

desc.push(a7);

function operate(){

$("#bigimg").hover(function(){

clearInterval(setint);

//$("#imgtitle").animate({"top":"230px"});

$(".arrorIcon").show();

},function(){

//$("#imgtitle").animate({"top":"260px"});

$(".arrorIcon").hide();

setint=setInterval("autoImg()",3000);

});

$("#right").click(function(){

autoImg();

});

$("#left").click(function(){

var num=$("#imglist").find("img.cur-select").attr("num");

var n=parseInt(num)-1;

$("#imglist").find("img.cur-select").removeClass("cur-select").addClass("imgNfoucus");

if(num>2&&num<4){

var length=(n-2)*(-85);

$("#imglist").animate({"left":length+"px"});

}else if(num==0){

$("#imglist").animate({"left":"-170px"});

n=6;

}

$("#imglist").find("img:eq("+n+")").addClass("cur-select").removeClass("imgNfoucus");

$("#imgview").find("a:eq("+n+")").show().siblings().hide();

$("#imgtitle").text(desc[n].de)

})

$("#imglist span img").hover(function(){

clearInterval(setint);

$(this).removeClass("imgNfoucus");

$(this).parent().siblings().children().addClass("imgNfoucus");

},function(){

$(this).addClass("imgNfoucus");

$("#imglist").find("img.cur-select").removeClass("imgNfoucus");

setint=setInterval("autoImg()",3000);

});

$("#imglist span img").click(function(){

$(this).removeClass("imgNfoucus").addClass("cur-select");

$(this).parent().siblings().children().addClass("imgNfoucus").removeClass("cur-select");

var sln=$(this).attr("num");

$("#imgview").find("a:eq("+sln+")").show().siblings().hide();

})

}

function autoImg(){

var num=$("#imglist").find("img.cur-select").attr("num");

var n=parseInt(num)+1;

$("#imglist").find("img.cur-select").removeClass("cur-select").addClass("imgNfoucus");

if(num>2&&num<5){

var length=(n-3)*(-85);

$("#imglist").animate({"left":length+"px"});

}else if(num==6){

$("#imglist").animate({"left":"0px"});

n=0;

}

$("#imglist").find("img:eq("+n+")").addClass("cur-select").removeClass("imgNfoucus");

$("#imgview").find("a:eq("+n+")").show().siblings().hide();

$("#imgtitle").text(desc[n].de);

}

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無标題文檔</title>

</head>

<body>

</div>

<a href="#" target="_blank" rel="external nofollow" class="imgTitle" id="imgtitle">第一張圖檔</a>

</div>

</div>

</div>

</div>

</body>

</html>

模仿百度首頁的圖檔輪播

繼續閱讀

web開發之前後端渲染

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條