js(非 jq ) 效果轮播效果(有瑕疵版本 :{ )

最新推荐文章于 2023-01-30 21:08:36 发布

陈二先生

最新推荐文章于 2023-01-30 21:08:36 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

分类专栏：源生 js 编写特效文章标签： js

本文链接：https://blog.youkuaiyun.com/a2416743126/article/details/79014726

源生 js 编写特效专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的轮播图效果，通过不断改变图片的边距来达到自动播放的效果，并且加入了鼠标悬停暂停播放的功能。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>风景网站</title>
<script src="jquery-3.2.1.min.js"></script>
<style>
	*{
		margin:0px;padding:0px;
	}
	#tab{
		overflow:hidden;
		width:400px;
		height:250px;
		position:relative;
	}
	img{
		float:lfet;
	}
</style>
<script>
	var interval;
	var pos = 0;
	window.onload = function(){
		/*
		
		*	获取对象
		
		*/
		var images = document.getElementsByTagName('img');
		var tab = document.getElementById('tab');
		images[0].parentNode.innerHTML += images[0].outerHTML;		//	过度图片
		/*
		
		*	执行效果
		
		*/
		run(images);												//	初始化运行轮播图
		//	鼠标移入暂停轮播
		tab.onmouseover = function(){
			clearInterval(interval);
		}
		
		//	鼠标移出，继续轮播
		tab.onmouseout = function(){
			run(images);
		}
	}
	var run = function(images){
		var width = allWitch(images[0]) + 12;						//	获取元素的真实宽度(包括 width padding-left and right  border-left and right margin-left and  right)
		var len = images.length;									//	获取该元素的总数量
		var m = 0;													//	次数标识，代替长度标识
		widthT = width * (len - 1);									//	获取总宽度
		//	进行循环
		interval = setInterval(function(){
			var mL = images[0].style.marginLeft;
			if(Math.abs(parseFloat(mL)) >= widthT || !mL){
				images[0].style.marginLeft = '0px';
			}else{
				var num = 100;										//	设定帧频
				var i = 0;											//	ci shu ji lu 
				var w = width / num;
				var l = setInterval(function(){
					i++;
					if(i >= 100){
						clearInterval(l);							//	删除事件
					}else{
						mL = images[0].style.marginLeft;
						images[0].style.marginLeft = (parseFloat(mL) - w) + 'px';
					}
				},20);
			}
			//	延迟执行
			setTimeout(function(){
				m++;
				//	判断次数，是否已经重置
				if(m >= len){
					m = 1;
					images[0].style.marginLeft = '0px';					//	重置图片(神不知鬼不觉的第一和第四切换)
				}
			},(20 * num));
		},4000)														//	设定时间 (毫秒)
	}
	//	获取对象的真实宽度
	function allWitch(obj){
		var mL = parseFloat(obj.marginLeft ? obj.marginLeft : 0);
		var mR = parseFloat(obj.marginRight ? obj.marginRight : 0);
		var width = obj.offsetWidth;
		width = width + mL + mR;
		return width;
	}
</script>
</head>
<body>
	<div id="tab">
		<div style='width:800px;'>
			<img src='https://pic2.zhimg.com/50/7995656af01fde733f6de210d24877d7_hd.jpg' style='width:400px; height:250px;'>
			<img src='https://pic3.zhimg.com/90/v2-d9e93a3b23f6fe8ff5bfbb07317dce9f_250x0.jpg' style='width:400px; height:250px;'>
			<img src='https://pic3.zhimg.com/90/258463ec3_250x0.jpg' style='width:400px; height:250px;'>
		</div>
	</div>
</body>
<html>

真荣幸因为这个 js 轮播可以增加一个新的分类。我在网上找了找，不知道是不是没有真实宽度，还是啥？反正效果达到了也就懒得改了，如果需要改动自己再进行改动，反正提供的都只是一个思路，如何完成终究还是自己来做会更舒心一些。