模仿百度首页的图片轮播

最新推荐文章于 2023-11-12 20:31:59 发布

ayla11

最新推荐文章于 2023-11-12 20:31:59 发布

阅读量702

点赞数

分类专栏： Web前端文章标签： html javascript 图片轮播

Web前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用JavaScript和jQuery实现的轮播图功能，包括自动播放、鼠标悬停暂停及通过按钮或图片切换的功能。该轮播图能够根据当前显示的图片调整位置，并更新对应的缩略图选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/picplay.js"></script>
</head>

<body>
<div class="content">
<div class="center" id="bigimg">
<div class="imgView" id="imgview" num="0">
   <a><img src="images/b1.jpg" /></a>
   <a style="display:none"><img src="images/b2.jpg"/></a>
   <a style="display:none"><img src="images/b3.jpg" /></a>
   <a style="display:none"><img src="images/b4.jpg"/></a>
   <a style="display:none"><img src="images/b5.jpg"/></a>
   <a style="display:none"><img src="images/b6.jpg"/></a>
   <a style="display:none"><img src="images/b7.jpg"/></a>
</div>
<div class="arrorIcon l10" id="left"><img src="images/left.png" /></div>
<div class="arrorIcon r10" id="right"><img src="images/right.png" /></div>
<a href="#" class="imgTitle" id="imgtitle">第一张图片</a>
</div>
<div class="imglist">
<div id="imglist" class="imglistdiv">
   <span class="normal"><img src="images/s1.jpg" class="cur-select" num="0"/></span><span class="normal"><img src="images/s2.jpg" class="imgNfoucus" num="1"/></span><span class="normal"><img src="images/s3.jpg" class="imgNfoucus" num="2"/></span><span class="normal"><img src="images/s4.jpg" class="imgNfoucus" num="3"/></span><span class="normal"><img src="images/s5.jpg" class="imgNfoucus" num="4"/></span><span class="normal"><img src="images/s6.jpg" class="imgNfoucus" num="5"/></span><span class="normal"><img src="images/s7.jpg" class="imgNfoucus" num="6"/></span>
</div>
</div>
</div>
</body>
</html>