html css js 实现简易轮播图

html + css + js 实现简易轮播图

code

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner {
            position: relative;
            width: 200px;
            height: 100px;
            display: flex;
            justify-content: center;
        }
        .swiper {
            width: 200px;
            height: 100px;
            background-color: #e1e1e1;
            position: relative;
            overflow: hidden;
        }
        .swiper-item {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 100px;
            display: inline-block;
            position: absolute;
            display: none;
        }
        .swiper-item:nth-child(1) {
            background-color: pink;
        }
        .swiper-item:nth-child(2) {
            background-color: skyblue;
        }
        .swiper-item:nth-child(3) {
            background-color: silver;
        }
        .swiper-item:nth-child(4) {
            background-color: rgb(255, 251, 192);
        }
        .active-enter {
            animation-name: enterSwiper;
            /* 动画时长要跟轮播图隐藏时间一样 */
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }
        .active-leave {
            animation-name: leaveSwiper;
            /* 动画时长要跟轮播图隐藏时间一样 */
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }
 
        .indicator {
            position: absolute;
            bottom: 6px;
            height: 10px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }
        .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin: 0 2px;
            background-color: rgba(0, 0, 0, .1);
        }
        .active-dot {
            background-color: #fff;
        }
 
        /* 进入画面动画 */
        @keyframes enterSwiper {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(0);
            }
        }
        /* 离开画面动画 */
        @keyframes leaveSwiper {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <!-- 轮播图区域 -->
    <div class="banner">
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-item" data-index="1">1</div>
            <div class="swiper-item" data-index="2">2</div>
            <div class="swiper-item" data-index="3">3</div>
            <div class="swiper-item" data-index="4">4</div>
        </div>
        <!-- 指示器 -->
        <!-- 跟轮播图个数一致 -->
        <div class="indicator">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
    <script>
        const swiperList = document.querySelector('.swiper')
        const swiper = document.querySelectorAll('.swiper-item');
        const dots = document.querySelectorAll('.dot')
        let timer = null;
        let index = 2;
        // 默认显示第一个轮播图
        swiper[0].style.display = 'block'
        swiper[0].classList.add('active-enter')
        // 默认选中第一个指示器点
        dots[0].classList.add('active-dot')
        // 轮播图切换逻辑
        function swiperFn () {
            // 逻辑 
            swiper.forEach((item, i) => {
                if(index === i + 1) {
                    // 依次轮播
                    item.style.display = 'block'
                    item.classList.add('active-enter')
                    // 依次切换轮播点
                    dots[i].classList.add('active-dot')
                } else {
                    // 这个时间要跟动画时长一样
                    setTimeout(() => {
                        item.style.display = 'none'
                        if(item.classList.contains('active-leave')) {
                            item.classList.remove('active-leave')
                        }
                    }, 1000)
                    if(item.classList.contains('active-enter')) {
                        item.classList.replace('active-enter', 'active-leave')
                    }
                    if(dots[i].classList.contains('active-dot')) {
                        dots[i].classList.remove('active-dot')
                    }
                }
            })
            
            index += 1
            if(index > swiper.length) {
                index = 1
            }
        }
        // 轮播图通过定时器轮播
        timer = setInterval(() => {
            swiperFn()
        }, 3000)
        
        // 鼠标进入停止轮播
        swiperList.addEventListener('mouseenter', () => {
            clearInterval(timer)
        })
        // 鼠标离开继续轮播
        swiperList.addEventListener('mouseleave', () => {
            timer = setInterval(() => {
                swiperFn()
            }, 3000)
        })
    </script>
</body>
</html>复制

标签

html css js 实现简易轮播图

html + css + js 实现简易轮播图

code

前端提高篇（102）：jQuery高级方法callbacks、deferred

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

HTML/SSM-实验室预约管理系统-99299（免费领源码开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

模仿电影中黑客电脑界面，html装逼代码

【html】新建一个html并且在浏览器运行

SSM基于html的网上购物系统2nluo 在线充值

html 无序标签有序标签及表单

在IntelliJ IDEA中创建一个HTML项目

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	.banner {
	position: relative;
	width: 200px;
	height: 100px;
	display: flex;
	justify-content: center;
	}
	.swiper {
	width: 200px;
	height: 100px;
	background-color: #e1e1e1;
	position: relative;
	overflow: hidden;
	}
	.swiper-item {
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 100px;
	display: inline-block;
	position: absolute;
	display: none;
	}
	.swiper-item:nth-child(1) {
	background-color: pink;
	}
	.swiper-item:nth-child(2) {
	background-color: skyblue;
	}
	.swiper-item:nth-child(3) {
	background-color: silver;
	}
	.swiper-item:nth-child(4) {
	background-color: rgb(255, 251, 192);
	}
	.active-enter {
	animation-name: enterSwiper;
	/* 动画时长要跟轮播图隐藏时间一样 */
	animation-duration: 1s;
	animation-fill-mode: forwards;
	}
	.active-leave {
	animation-name: leaveSwiper;
	/* 动画时长要跟轮播图隐藏时间一样 */
	animation-duration: 1s;
	animation-fill-mode: forwards;
	}

	.indicator {
	position: absolute;
	bottom: 6px;
	height: 10px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	}
	.dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin: 0 2px;
	background-color: rgba(0, 0, 0, .1);
	}
	.active-dot {
	background-color: #fff;
	}

	/* 进入画面动画 */
	@keyframes enterSwiper {
	0% {
	transform: translateX(100%);
	}
	100% {
	transform: translateX(0);
	}
	}
	/* 离开画面动画 */
	@keyframes leaveSwiper {
	0% {
	transform: translateX(0);
	}
	100% {
	transform: translateX(-100%);
	}
	}
	</style>
	</head>
	<body>
	<!-- 轮播图区域 -->
	<div class="banner">
	<!-- 轮播图 -->
	<div class="swiper">
	<div class="swiper-item" data-index="1">1</div>
	<div class="swiper-item" data-index="2">2</div>
	<div class="swiper-item" data-index="3">3</div>
	<div class="swiper-item" data-index="4">4</div>
	</div>
	<!-- 指示器 -->
	<!-- 跟轮播图个数一致 -->
	<div class="indicator">
	<div class="dot"></div>
	<div class="dot"></div>
	<div class="dot"></div>
	<div class="dot"></div>
	</div>
	</div>
	<script>
	const swiperList = document.querySelector('.swiper')
	const swiper = document.querySelectorAll('.swiper-item');
	const dots = document.querySelectorAll('.dot')
	let timer = null;
	let index = 2;
	// 默认显示第一个轮播图
	swiper[0].style.display = 'block'
	swiper[0].classList.add('active-enter')
	// 默认选中第一个指示器点
	dots[0].classList.add('active-dot')
	// 轮播图切换逻辑
	function swiperFn () {
	// 逻辑
	swiper.forEach((item, i) => {
	if(index === i + 1) {
	// 依次轮播
	item.style.display = 'block'
	item.classList.add('active-enter')
	// 依次切换轮播点
	dots[i].classList.add('active-dot')
	} else {
	// 这个时间要跟动画时长一样
	setTimeout(() => {
	item.style.display = 'none'
	if(item.classList.contains('active-leave')) {
	item.classList.remove('active-leave')
	}
	}, 1000)
	if(item.classList.contains('active-enter')) {
	item.classList.replace('active-enter', 'active-leave')
	}
	if(dots[i].classList.contains('active-dot')) {
	dots[i].classList.remove('active-dot')
	}
	}
	})

	index += 1
	if(index > swiper.length) {
	index = 1
	}
	}
	// 轮播图通过定时器轮播
	timer = setInterval(() => {
	swiperFn()
	}, 3000)

	// 鼠标进入停止轮播
	swiperList.addEventListener('mouseenter', () => {
	clearInterval(timer)
	})
	// 鼠标离开继续轮播
	swiperList.addEventListener('mouseleave', () => {
	timer = setInterval(() => {
	swiperFn()
	}, 3000)
	})
	</script>
	</body>
	</html>

html css js 实现简易轮播图

html + css + js 实现简易轮播图

code

微信扫一扫：分享