2023-12-04 16:51阅读: 50评论: 0推荐: 0

js自动播放【轮播图】

demo

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto Carousel</title>
    <style>
        #carousel-container {
            width: 300px;
            overflow: hidden;
        }
 
        #image-list {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
 
        .carousel-image {
            width: 300px;
            height: 200px;
            object-fit: cover;
        }
    </style>
</head>
<body>
 
<div id="carousel-container">
    <div id="image-list">
        <img class="carousel-image" src="../bg2.jpg" alt="Image 1">
        <img class="carousel-image" src="../bg2.jpg" alt="Image 2">
        <img class="carousel-image" src="../bg2.jpg" alt="Image 3">
        <!-- Add more images as needed -->
    </div>
</div>
 
<script>
    const imageList = document.getElementById('image-list');
    let currentIndex = 0;
    let direction = 1; // 1 for forward, -1 for backward
 
    function updateCarousel() {
        const transformValue = -currentIndex * 300; // 300 is the width of each image
        imageList.style.transform = `translateX(${transformValue}px)`;
    }
 
    function nextSlide() {
        currentIndex += direction;
 
        // 检查我们是否到达终点并相应地改变方向
        if (currentIndex === imageList.children.length - 1 || currentIndex === 0) {
            direction *= -1;
        }
 
        updateCarousel();
    }
 
    // 设置定时器，每隔一定时间切换到下一张图片
    const intervalId = setInterval(nextSlide, 2000); // 切换间隔为2秒
 
    // 如果需要停止轮播，可以使用 clearInterval(intervalId);
 
    // 可选：在鼠标悬停时停止轮播
    imageList.addEventListener('mouseenter', () => clearInterval(intervalId));
    imageList.addEventListener('mouseleave', () => {
        clearInterval(intervalId);
        intervalId = setInterval(nextSlide, 2000);
    });
</script>
 
</body>
</html>

上一篇js定时器demo

下一篇js事件

posted @ 2023-12-04 16:51 __username 阅读(50) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· js定时器demo

· 【vue2】 demo1

· HTML+CSS＞动画循环轮播图

· ajax自动轮播图-可点击-鼠标悬停止等-完善版

· js轮播图效果

历史上的今天：
2022-12-04 10记录数据库基础知识
2022-12-04 图片api（备用）
2022-12-04 记录一下markdown上传到博客图片不显示问题
2022-12-04 Linux的那点事

飞翔的企鹅

日日行，不怕千万里；常常做，不怕千万事

js自动播放【轮播图】

demo

公告

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

GOOD!

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Auto Carousel</title>
	<style>
	#carousel-container {
	width: 300px;
	overflow: hidden;
	}

	#image-list {
	display: flex;
	transition: transform 0.5s ease-in-out;
	}

	.carousel-image {
	width: 300px;
	height: 200px;
	object-fit: cover;
	}
	</style>
	</head>
	<body>

	<div id="carousel-container">
	<div id="image-list">
	<img class="carousel-image" src="../bg2.jpg" alt="Image 1">
	<img class="carousel-image" src="../bg2.jpg" alt="Image 2">
	<img class="carousel-image" src="../bg2.jpg" alt="Image 3">
	<!-- Add more images as needed -->
	</div>
	</div>

	<script>
	const imageList = document.getElementById('image-list');
	let currentIndex = 0;
	let direction = 1; // 1 for forward, -1 for backward

	function updateCarousel() {
	const transformValue = -currentIndex * 300; // 300 is the width of each image
	imageList.style.transform = `translateX(${transformValue}px)`;
	}

	function nextSlide() {
	currentIndex += direction;

	// 检查我们是否到达终点并相应地改变方向
	if (currentIndex === imageList.children.length - 1 \|\| currentIndex === 0) {
	direction *= -1;
	}

	updateCarousel();
	}

	// 设置定时器，每隔一定时间切换到下一张图片
	const intervalId = setInterval(nextSlide, 2000); // 切换间隔为2秒

	// 如果需要停止轮播，可以使用 clearInterval(intervalId);

	// 可选：在鼠标悬停时停止轮播
	imageList.addEventListener('mouseenter', () => clearInterval(intervalId));
	imageList.addEventListener('mouseleave', () => {
	clearInterval(intervalId);
	intervalId = setInterval(nextSlide, 2000);
	});
	</script>

	</body>
	</html>