使用jQuery实现的图片左右来回轮播功能

最新推荐文章于 2022-10-27 15:51:52 发布

qq_34220109

最新推荐文章于 2022-10-27 15:51:52 发布

阅读量481

点赞数

分类专栏： jQuery 文章标签： jQuery 轮播左右

本文链接：https://blog.csdn.net/qq_34220109/article/details/103274963

版权

使用jQuery实现的图片左右来回轮播功能

第一次使用CSDN写博客，诸多不完善之处还望各位多多谅解。希望今后的日子和大家有更多的交流和发展。话不多说，进入主题。
轮播功能有很多，我没事写了一个左右来回轮播的功能，鼠标进入可以暂停，移出续播，就是这样一个简单的功能。直接上代码：
CSS部分：

<style type="text/css">
		*{
   	padding: 0;margin: 0;	}
		.out{
   
			width: 1200px;
			height: 200px;
			background-color: cyan;
			margin: 20px auto;
			border: 2px solid green;
			overflow: hidden;
			position: relative;
		}
		.in{
   
			width: 4800px;
			height: 200px;
			position: absolute;
			display: flex;
			left: 0; top: 0;
		}
		/* 其实用CSS做也行，不过难以实现左右轮回播放 */
		@keyframes plays{
   
			30%{
    left: -1200px; }
			60%{
    left: -2400px; }
			100%{
    left: -3600px; }
		}
	</style>

HTML部分：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
	<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="out"

最低0.47元/天解锁文章

qq_34220109

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery实现的图片左右来回轮播功能

使用jQuery实现的图片左右来回轮播功能第一次使用CSDN写博客，诸多不完善之处还望各位多多谅解。希望今后的日子和大家有更多的交流和发展。话不多说，进入主题。轮播功能有很多，我没事写了一个左右来回轮播的功能，鼠标进入可以暂停，移出续播，就是这样一个简单的功能。直接上代码：CSS部分：<style type="text/css"> *{ padding: 0;margin:...
复制链接

扫一扫

专栏目录