基于JavaScript实现轮播图代码

前端技术 2023/09/02 JavaScript

一、要点：

1.页面加载时，图片重合，叠在一起[绝对定位];

2.第一张显示，其它隐藏;

3.设置下标,给下标设置颜色让它随图片移动;

4.鼠标移动到图片上去，显示左右移动图标，鼠标移走，继续轮播;

二、实现代码：

html代码:

<!DOCTYPE html>
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
<title>轮播图</title>
<link href=\"css/LunBimg.css\" rel=\"stylesheet\" />
<script src=\"js/jquery-1.10.2.min.js\"></script>
<script src=\"js/LunBimg.js\"></script>
</head>
<body>
<div id=\"allswapImg\">
<div class=\"swapImg\"><img src=\"image/1.jpg\" /></div>
<div class=\"swapImg\"><img src=\"image/2.jpg\" /></div>
<div class=\"swapImg\"><img src=\"image/3.jpg\" /></div>
<div class=\"swapImg\"><img src=\"image/4.jpg\" /></div>
<div class=\"swapImg\"><img src=\"image/5.jpg\" /></div>
<div class=\"swapImg\"><img src=\"image/6.jpg\" /></div>
</div>
<div class=\"btn btnLeft\"><</div>
<div class=\"btn btnRight\">></div>
<div id=\"tabs\">
<div class=\"tab bg\">1</div>
<div class=\"tab\">2</div>
<div class=\"tab\">3</div>
<div class=\"tab\">4</div>
<div class=\"tab\">5</div>
<div class=\"tab\">6</div>
</div>
</body>
</html>

css代码：

* {
padding:0px;
margin:0px;
}
.swapImg {
position:absolute;
}
.btn {
position:absolute;
height:90px;
width:60px;
background:rgba(0,0,0,0.5);/*设置背景颜色为黑色，透明度为50%*/
color:#ffffff;
text-align:center;
line-height:90px;
font-size:40px;
top:155px;/*图片高度400/2-45*/
cursor:pointer;
/*display:none;*/
}
.btnRight {
left:840px;/*图片宽度900-导航宽度60*/
}
#tabs {
position:absolute;
top:370px;
margin-left:350px;
}
.tab {
height:20px;
width:20px;
background:#05e9e2;
line-height:20px;
text-align:center;
font-size:10px;
float:left;
color:#ffffff;
margin-right:10px;
border-radius:100%;
cursor:pointer;
}
.bg {
background:#00ff21;
}

js代码：

/// <reference path=\"_references.js\" />
var i = 0;//全局变量
//定义一个变量用来获取轮播的过程
var time;
$(function ()
{
//1.页面加载后,找到Class等于swapImg的第一个对象，让它显示，它的兄弟元素隐藏
$(\".swapImg\").eq(0).show().siblings().hide();
showTime();
//当鼠标放到下标上显示该图片，鼠标移走继续轮播
$(\".tab\").hover(
function ()
{
//获取到当前鼠标所在的下标的索引
i = $(this).index();
show();
//鼠标放上去之后，怎么停止呢？获取到变量的过程，清除轮播，把变量传进去
clearInterval(time);
}, function ()
{
showTime();
});
//要求四，当我点击左右切换
$(\".btnLeft\").click(function ()
{
//1.点击之前要停止轮播
clearInterval(time);
//点了之后，-1
if (i == 0)
{
i =6;
}
i--;
show();
showTime();
});
$(\".btnRight\").click(function () {
//1.点击之前要停止轮播
clearInterval(time);
//点了之后，-1
if (i == 5) {
i = -1;
}
i++;
show();
showTime();
});
});
function show() {
//$(\"#allswapImg\").hover(function ()
//{
// $(\".btn\").show();
//}, function ()
//{
// $(\".btn\").hide();
//});
//fadeIn(300)淡入，fadeout(300)淡出，过滤时间0.3s
$(\".swapImg\").eq(i).fadeIn(300).siblings().fadeOut();
$(\".tab\").eq(i).addClass(\"bg\").siblings().removeClass(\"bg\");
}
function showTime()
{
time = setInterval(function () {
i++;
if (i == 6) {
//只有6张图片，所以i不能超过6，如果i等于6时，我们就让它等于第一张
i = 0;
}
show();
}, 3000);
}

以上所述是小编给大家介绍的基于JavaScript实现轮播图代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/4760

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案