待改进-自动切换的轮播图代码

最新推荐文章于 2025-06-15 12:12:31 发布

weixin_33797791

最新推荐文章于 2025-06-15 12:12:31 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b65187e6fb9a04fac0d30cd

本文详细介绍了使用JavaScript实现的一种图片轮播动画效果，包括图片自动滚动及文字上下移动的细节处理，并探讨了如何通过判断变量值来控制动画的暂停与继续。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



//设置wrap的宽度
//onLoad
$(function(){

var oShade = $('shade');
var oWrap = $('wrap');
var oBar = $class(oWrap,'div','bar');
var oBarW = parseInt( getStyle(oBar[0],'width') );


oWrap.style.width = oBarW*oBar.length + 'px';
oWrap.style.position = 'absolute';
oWrap.style.left = 0;
oWrap.style.top = 0;

var i = -1;
var v = 20;

oWrap.timer = setTimeout(function timer(){
	++i;
	if( i == oBar.length ){
		i = 0;
		v = 100;
	}else{
		v = 20;
	}

	//1.向左移动
	doMove( oWrap,'left',v,-oBarW*i,0,30,function(){
		//2.文字向上移出
		doMove( oBar[i].getElementsByTagName('div')[0],'bottom',10,0,0,30,function(){
			//3.文字向下移走
			doMove( oBar[i].getElementsByTagName('div')[0],'bottom',10,-100,2000,30,function(){
				//从1开始，重复执行
					setTimeout(timer,200);
			});
		});


	});

},200);




});
复制代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>

<style>
*{ margin: 0; padding: 0; }
a{ text-decoration: none; }

	#shade,#wrap,.bar,.bar img{ height: 314px; }
	#shade{ position: absolute; z-index: 9; width: 514px; overflow: hidden; }

	#wrap{  }
	.bar{ position: relative; float: left;  }
	.bar img{  }
	.text,.text a{ color: #fff; }
	.text a:hover{ text-decoration: underline; }
	.text{ position: absolute; z-index: 2; bottom: 0; left: 0; bottom: -100px; width: 476px; height: 100px; padding: 0 16px; background: rgba(0,0,0,0.5); }
	.text h2{ line-height: 48px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 20px; }
	.text p{ text-indent: 2em; font-size: 12px; }
</style>

</head>
<body>



<div id="shade">
	

	<div id="wrap">
		
		<div class="bar">
			<img src="img/1.jpg" alt="图片" />
			<div class="text">
				<h2><a href="#">大标题大标题大标题大标题大标题大标题大标题大标题</a></h2>
				<p>介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文介绍文字介介绍文字介绍文字介绍文字介绍文字介绍文字</p>
			</div>
		</div>
		
		<div class="bar">
			<img src="img/1.jpg" alt="图片" />
			<div class="text">
				<h2><a href="#">大标题大标题大标题大标题大标题大标题大标题大标题</a></h2>
				<p>介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文介绍文字介介绍文字介绍文字介绍文字介绍文字介绍文字</p>
			</div>
		</div>
		
		<div class="bar">
			<img src="img/1.jpg" alt="图片" />
			<div class="text">
				<h2><a href="#">大标题大标题大标题大标题大标题大标题大标题大标题</a></h2>
				<p>介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文介绍文字介介绍文字介绍文字介绍文字介绍文字介绍文字</p>
			</div>
		</div>
		
<!-- 		<div class="bar">
			<img src="img/1.jpg" alt="图片" />
			<div class="text">
				<h2><a href="#">大标题大标题大标题大标题大标题大标题大标题大标题</a></h2>
				<p>介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文介绍文字介介绍文字介绍文字介绍文字介绍文字介绍文字</p>
			</div>
		</div>
		
		<div class="bar">
			<img src="img/1.jpg" alt="图片" />
			<div class="text">
				<h2><a href="#">大标题大标题大标题大标题大标题大标题大标题大标题</a></h2>
				<p>介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文介绍文字介介绍文字介绍文字介绍文字介绍文字介绍文字</p>
			</div>
		</div>
		
		<div class="bar">
			<img src="img/1.jpg" alt="图片" />
			<div class="text">
				<h2><a href="#">大标题大标题大标题大标题大标题大标题大标题大标题</a></h2>
				<p>介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文介绍文字介介绍文字介绍文字介绍文字介绍文字介绍文字</p>
			</div>
		</div>
		
		<div class="bar">
			<img src="img/1.jpg" alt="图片" />
			<div class="text">
				<h2><a href="#">大标题大标题大标题大标题大标题大标题大标题大标题</a></h2>
				<p>介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文介绍文字介介绍文字介绍文字介绍文字介绍文字介绍文字</p>
			</div>
		</div>

	</div> -->

</div>


<script src="getId.js"></script>
<script src="doMove.js"></script>
<script src="main.js"></script>
</body>
</html>
复制代码

当前:onload之后就可以执行,先向左、停下后文字标题向上跑，之后文字标题回去，图片再向左效果截图:

需求:鼠标移上暂停标题向下和图片向左，鼠标移开继续进行
备注：
目前我的思路是：因为定时器的最后一个回调函数是重头开始，也就是说，直接用if判断再清除定时器是无用功，最底层的回调函数已经放在任务队列了，所以要判断的是什么情况下把它放入任务队列中，对比可以在鼠标悬停的时候改变一个变量值，然后在最底层使用回调函数前根据这个变量来判断要不要执行这个回调函数。这样行得通吗？行的通的，因为if判断再变量赋值是同步任务，比定时器要先执行。然后鼠标移开就再调用一边动画函数，到这时候有个问题，i的问题，因为i的自加是同步任务的，它会被加1，如果直接调用会让图片直接跑到下下张图片，因为i会加一次，所以又要判断一次，根据那个变量判断，或不加重置变量或加不重置变量。

有个问题：onmouseover也是个异步任务，所以是先执行的延迟1s的定时器“快”还是后执行无延迟的onmouseover"快" 【答案：onmouseover“快”】

昨天在试这个思路的时候有个问题，就是.text这个div的层级是最高的，导致它出现后会遮住我想绑定事件对应的元素，解决方案肯定有，最low就是设置一堆if判断，但费时费力，我想能不能用元素获取焦点的方法解决，但发现这部分知识牵扯到【事件冒泡】，所以还是先放放，过段时间再来看。

转载于:https://juejin.im/post/5b65187e6fb9a04fac0d30cd