css+jquery实现图片滑动特效果animate动画+定位纯手写

最新推荐文章于 2024-07-29 03:33:18 发布

go24k

最新推荐文章于 2024-07-29 03:33:18 发布

阅读量567

点赞数

分类专栏：前端文章标签： css jquery javascript

本文链接：https://blog.csdn.net/go24k/article/details/127721850

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

想当年做后端开发，对前端总是保持了“强烈的敬畏心”，尤其是对这些滑动的css特效，更是“不忍直视”，但是逼急之后，只能手撕它了！

通过jquery框架动画函数animate，结合css的position 绝对定位，实现图片自动的轮播，轮播内容不限于图片，也可以是自定义的html模块。源码如下，直接复制，替换上图片及自己的jquery库文件即可运行：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.6.1.min.js"></script>
		<style type="text/css">
			.container {
				position: relative;
				left: 50px;
				top: 50px;
				width: 725px;
				height: 320px;
				overflow: hidden;
				background-color: red;
			}

			.item {
				position: absolute;
				/* left: 0%; */
				top: 0%;
			}

			
		</style>
		<script type="text/javascript">
			$(document).ready(function() {

				//记录可见的活动项序号
				let curIndex = 0;
				//获取活动项的总数量
				let count=$(".item").children().length-1;

				//初始化滑动项的位置及在滑动后复位
				function initSlide() {						 
				$(".item").each(function(index, ele) {
					if (index == curIndex) {
						$(ele).css("left", "0%")
					}else{
						$(ele).css("left","100%")
					}						 
					});									
				}
				
				function sildLeft(){
					let a=curIndex;
					curIndex++;
					if(curIndex>count)
						curIndex=0;				
					$("#item-"+a+",#item-"+curIndex).animate({
						left: "-=100%"
					}, 500,"swing",function(){initSlide()}); 
				}
				//初始化
				initSlide();
				
				// $("#goLeft").click(function() {
				// 	sildLeft();					
				// });
				
				setInterval(sildLeft,2000)

			});
		</script>
	</head>
	<body>
		<div class="container">
			<div class="item" id="item-0">
				<img src="../moni/img/a.jpg" />
			</div>
			<div class="item" id="item-1">
				<div style="width:725px;
				height: 320px;background-color: greenyellow;font-size: 30px;">2</div>
			</div>
			<div class="item" id="item-2">
				<img src="../moni/img/a.jpg" />
			</div>
			<div class="item" id="item-3">
				<div style="width:725px;
				height: 320px;background-color: skyblue;font-size: 30px;">4</div>
			</div>
		</div>
		<div>
			<!-- <button type="button" id="goLeft"">left</button> -->
		</div>
	</body>
</html>

效果图示：

go24k

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css+jquery实现图片滑动特效果animate动画+定位纯手写

通过jquery框架动画函数animate，结合css的position 绝对定位，实现图片自动的轮播，轮播内容不限于图片，也可以是自定义的html模块。想当年做后端开发，对前端总是保持了“强烈的敬畏心”，尤其是对这些滑动的css特效，更是“不忍直视”，但是逼急之后，只能手撕它了！
复制链接

扫一扫

专栏目录