HTML+CSS +JS实现轮播图的四种方法

您所在的位置：网站首页 › html5图片切换下一页代码 › HTML+CSS +JS实现轮播图的四种方法

HTML+CSS +JS实现轮播图的四种方法

2024-06-24 20:26| 来源: 网络整理| 查看: 265

HTML+CSS +JS实现轮播图

轮播图能够自动播放，当点击左右箭头时可以手动切换图片；当鼠标移入圆点时，自动播放停止，显示当前图片；当鼠标移出圆点时，图片又从当前图片开始自动播放；当鼠标点击圆点时，可以手动切换图片；图片的播放是循环的。

一、使用全局变量实现轮播图 1、布局——HTML + CSS

首先，在页面放一个整体的大盒子，在大盒子中装几个小盒子，分别用于放图片、左右点击箭头、底部切换的圆点。

; ;

对添加的盒子设置合适的样式即可

2、实现步骤——JS

（1）布局（2）通过document去获取页面元素。圆点获取后返回数组，用于图片切换时便于得到当前图片地址；获取的img元素，可以通过img.src去改变图片的地址，从而实现页面放置一个img可以实现轮播图。

//获取图片 let img = document.querySelector('img'); //获取圆点 let span = document.querySelectorAll('span'); //获取左边箭头 let left = document.getElementById('left'); //获取右边箭头 let right = document.getElementById('right'); //初始化当前图片下标 let index = 0; //timer用于获取自动播放轮播图是设置的定时器的返回值 let timer;

（3）设置定时器让轮播图自动播放

//设置定时器并接收返回值，便于停止自动播放 timer = setInterval(function() { if (index == span.length) { index = 0; } show(); index++; }, 1000);

（4）设置圆点手动控制切换图片

for(let i = 0; i { clearInterval(this.timer); this.show(); this.autoPlay(); }, false); } } } return PlayImg; } 三、js类+模块方法实现轮播图

步骤同上，具体的js代码如下：

classLB.js文件

class ClassLB { constructor() { this.img = document.querySelectorAll('.img img'); this.point = document.querySelectorAll('.point li'); this.index = 0; this.timer = null; } show() { for (let i = 0; i { this.index++; this.show(); }, 1000); } pointCtrl() { for (let i = 0; i { if (this.index { this.index++; this.show(); } } addEvent() { for (let i = 0; i { clearInterval(this.timer); this.index = i; this.show(); }, false); this.point[i].addEventListener('mousemove', () => { clearInterval(this.timer); this.index = i; this.show(); this.autoPlay(); }, false); } } } export default ClassLB;

body中：

import ClassLB from "./js/classLB.js"; let classLB = new ClassLB(); classLB.autoPlay(); classLB.lrCtrl(); classLB.pointCtrl(); classLB.addEvent(); 四、仅使用css和html实现轮播图方法一：box-box-ul-li-a-img 轮播图 *{ margin: 0; padding: 0; } li{ float: left; list-style: none; } .box{ width: 700px; overflow: hidden; position: relative; height: 360px; margin-left: 300px; } .box img{ width: 700px; height: 360px; } ul{ width: 2100px; height: 360px; position: absolute; left: 0; top: 0; animation: myanimation 8s infinite; } @keyframes myanimation { 0%,25%{ left: 0; } 35%,60%{ left: -700px; } 70%,90%{ left: -1400px; } } 方法二：box-box-a-img

css文件：

.content-middle{ width: 100%; overflow: hidden; position: relative; height: 260px; } .middle-box a{ display: inline-block; width: 315px; height: 260px; } .middle-box img{ width: 315px; height: 260px; } .middle-box{ width: 3715px; height: 260px; position: absolute; display: flex; justify-content: space-between; left: 0; top: 0; animation: myanimation2 20s infinite; } @keyframes myanimation2 { 0%,5%{ left: 0; } 10%,15%{ left: -340px; } 20%,25%{ left: -680px; } 30%,35%{ left: -1020px; } 40%,45%{ left: -1360px; } 50%,55%{ left: -1700px; } 60%,65%{ left: -2040px; } 70%,75%{ left: -2380px; } 80%,85%{ left: -2455px; } }

【本文地址】

HTML+CSS +JS实现轮播图的四种方法

HTML+CSS +JS实现轮播图的四种方法

今日新闻

推荐新闻