javascript幻灯片淡入淡出

最新推荐文章于 2024-10-12 16:44:45 发布

cdcdhj

最新推荐文章于 2024-10-12 16:44:45 发布

阅读量360

点赞数

分类专栏： javascript学习日记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/cdcdhj/article/details/118884933

版权

javascript学习日记专栏收录该内容

151 篇文章

订阅专栏

这是一个使用HTML、CSS和JavaScript实现的网页自动轮播图片的效果代码。通过设置样式和事件监听，当鼠标悬停在轮播框上时停止自动播放，移开时恢复自动播放，同时提供手动切换图片的功能。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body,div,ul,li{margin: 0;padding: 0;}
			ul{list-style-type: none;}
			body{background: #000;text-align: center;font: 12px/20px Arial;}
			#box{position: relative;width: 802px;height: 452px;background: #fff;border-radius: 5px;border: 8px solid #fff;margin:10px auto;}
			#box .list{position: relative;width: 800px;height: 450px;overflow: hidden;border: 1px solid #ccc;}
			#box .list li{position: absolute;top: 0;left: 0;width: 800px;height: 450px;opacity: 0;filter: alpha(opacity=0);}
			#box .list li img{width: 100%;height: 100%;}
			#box .list li.current{opacity: 1;filter: alpha(opacity=100);}
			#box .count{position: absolute;right: 0;bottom: 5px;}
			#box .count li{color: #fff;float: left;width: 20px;height: 20px;cursor: pointer;margin-right: 5px;overflow: hidden;background: #f90;opacity: 0.7;filter: alpha(opacity=70);border-radius: 20px;}
			#box .count li.current{color: #fff;opacity: 1;filter: alpha(opacity=100);font-weight: 700;background: #f60;}
		</style>
	</head>
	<body>
		<div id="box">
			<ul class="list">
				<li class="current" style="opacity:1;"><img src="./img/1.jpg"></li>
				<li><img src="./img/2.jpg"></li>
				<li><img src="./img/3.jpg"></li>
				<li><img src="./img/4.jpg"></li>
				<li><img src="./img/5.jpg"></li>
			</ul>
			<ul class="count">
				<li class="current">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
		<script language='javascript'>
			window.onload=function(){
				var oBox=document.getElementById('box');
				var aUl=oBox.getElementsByTagName('ul');;
				var aImg=aUl[0].getElementsByTagName('li');
				var aNum=aUl[1].getElementsByTagName('li');
				var timer=play=null;
				var i=index=0;
				for(i=0;i<aNum.length;i++){
					aNum[i].index=i;
					aNum[i].onmouseover=function(){
						show(this.index);
					};
				}
				oBox.onmouseover=function(){
					clearInterval(play);
				};
				oBox.onmouseout=function(){
					autoPlay();
				};
				function autoPlay(){
					play=setInterval(function(){
						index++;
						index>=aImg.length&&(index=0);
						show(index);
					},2000);
				}
				autoPlay();
				function show(a){
					index=a;
					var alpha=0;
					for(i=0;i<aNum.length;i++){
						aNum[i].className="";
						aNum[index].className="current";
						clearInterval(timer);
					}
					for(i=0;i<aImg.length;i++){
						aImg[i].style.opacity=0;
						aImg[i].style.filter="alpha(opacity=0)";
					}
					timer=setInterval(function(){
						alpha+=6;
						alpha>100&&(alpha=100);
						aImg[index].style.opacity=alpha/100;
						aImg[index].style.filter="alpha(opacity="+alpha+")";
						alpha==100&&clearInterval(timer);
					},50);
				}
			};
		
			
		</script>
	</body>
</html>