html轮播图做法

发布时间：2023-09-16 11:30:19 所属栏目：教程来源：转载

导读： 　　首先，在新建的html文档中，在头部head中引入一个.css文件和.js文件，并在body中新建一个div，并添加class和id属性。

　　<head>

　　 <link rel="stylesheet" href="sty

首先，在新建的html文档中，在头部head中引入一个.css文件和.js文件，并在body中新建一个div，并添加class和id属性。

　　<head>

　　 <link rel="stylesheet" href="style.css">

　　 <script src="script.js"></script>

　　</head>

　　<body>

　　 <div class="slider" id="slider">

　　 

　　 </div>

　　</body>

　　接下来，在.css文件中，设定轮播图的样式。以1000×500的轮播图为例，设定轮播图的大小和位置，以及图片的宽度和高度，还需要设定轮播图中图片的初始位置和动画变化时间等。

　　.slider {

　　 width: 1000px;

　　 height: 500px;

　　 margin: 0 auto;

　　 overflow: hidden;

　　 position: relative;

　　 border: 2px solid #ddd;

　　}

　　.slider img {

　　 width: 1000px;

　　 height: 500px;

　　 position: absolute;

　　 top: 0;

　　 left: 0;

　　 opacity: 0;

　　 transition: opacity 500ms ease-in-out;

　　}

　　.slider img.active {

　　 opacity: 1;

　　 z-index: 1;

　　}

　　在.js文件中，添加轮播代码。首先，定义一个变量来跟踪当前显示的图像。然后，在设置一个计时器，在5000ms之后切换到下一个图像。最后，更新当前图像的class，以便将当前图像加上active类，从而更改它的opacity。

　　var slider = document.getElementById("slider");

　　var images = slider.getElementsByTagName("img");

　　var counter = 0;

　　setInterval(function() {

　　 images[counter].classList.remove("active");

　　 counter++;

　　 if (counter == images.length) {

　　 counter = 0;

　　 }

　　 images[counter].classList.add("active");

　　}, 5000);

　　最后，只需要在slider div中添加图片元素即可，如下所示：

　　<div class="slider" id="slider">

　　 <img src="img1.jpg" class="active">

　　 <img src="img2.jpg">

　　 <img src="img3.jpg">

　　</div>

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!