前端实战小案例--无缝轮播图实现

最新推荐文章于 2024-03-07 17:07:28 发布

朽木自雕xmzd

最新推荐文章于 2024-03-07 17:07:28 发布

阅读量760

点赞数

分类专栏：前端实战案例文章标签：轮播图前端实战

本文链接：https://blog.csdn.net/qq_16687863/article/details/101308376

版权

前端实战案例专栏收录该内容

20 篇文章 52 订阅

订阅专栏

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门

觉得不错的记得点个赞?支持一下我0.0！谢谢了！

不积跬步无以至千里，不积小流无以成江海。

效果如下：

代码及注释如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无缝轮播</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.slide{
				height: 280px;
				width: 520px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				overflow: hidden;
			}
			.slide-imgs{
				width: 3120px;
				height: 100%;
			}
			.slide-imgs img{
				float: left;
			}
			.slide-dots{
				width: 90px;
				height: 10px;
				position: absolute;
				bottom: 15px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.slide-dots li label{
				display: inline-block;
				width: 10px;
				height: 10px;
				background-color: #FFFFFF;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div class="slide">
			<div class="slide-imgs">
				<img src="./imgs/slider01.jpg" alt="">
				<img src="./imgs/slider02.jpg" alt="">
				<img src="./imgs/slider03.jpg" alt="">
				<img src="./imgs/slider04.jpg" alt="">
				<img src="./imgs/slider05.jpg" alt="">
				<img src="./imgs/slider01.jpg" alt="">
			</div>
			<ul class="slide-dots">
				<li><label></label></li>
				<li><label></label></li>
				<li><label></label></li>
				<li><label></label></li>
				<li><label></label></li>
			</ul>
		</div>
	</body>
	<script>
		window.onload = function(){
			var left = 0;	//这个为每次平移的像素值
			var timer;		//定义settimeout的返回值
			var slide_img = document.getElementsByClassName('slide-imgs')[0];
			var img = slide_img.getElementsByTagName('img');
			var slide_label = document.getElementsByClassName('slide-dots')[0].getElementsByTagName('label');
			run();
			
			function run(){
				// 小圆点背景色随图片切换而改变
				var img_index = Math.floor(-left/520);
				change_dot(img_index);	
				
				// 如果刚好是整张图片,则暂停一秒
				var n = (left%520 == 0)?1000:10
				timer = setTimeout(run, n); 
				slide_img.style.marginLeft = left+"px";
				left -= 10;
				// 当位置小于等于2600时,将其位置初始化到第一张图片
				if(left <= -2600){
					slide_img.style.marginLeft = "0px";
					left = 0;
				}
			}
			function change_dot(m){
				for(let i=0;i<slide_label.length;i++){
					slide_label[i].style.backgroundColor = "#FFFFFF";
				}
				// 当鼠标移入事件发生时,有一定的几率m会等于5
				//（因为有6张图片，所以在第5张切换到第6张的一瞬间有鼠标移入事件则会出错）,
				// 而slide_label索引为0到4,所以会报错
				// 这里加一个判断,防止因报错程序停止运行
				if(m<5){
					slide_label[m].style.backgroundColor = "orangered";
				}
			}
			// 绑定鼠标移出移入轮播图图片事件
			for(let i=0;i<img.length;i++){
				(function(i){
					img[i].onmousemove = function(){
						clearTimeout(timer);
						left = -i*520;
						slide_img.style.marginLeft = left + "px";
						
					}
					img[i].onmouseleave = function(){
						run();
					}
				})(i);
			}
			// 绑定鼠标移出移入轮播图小圆点事件,原理同上
			for(let i=0;i<slide_label.length;i++){
				(function(i){
					slide_label[i].onmousemove = function(){
						clearTimeout(timer);
						left = -i*520;
						slide_img.style.marginLeft = left + "px";
						change_dot(i);
					}
					slide_label[i].onmouseleave = function(){
						run();
					}
				})(i);
			}
		}
	</script>
</html>

朽木自雕xmzd

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
前端实战小案例--无缝轮播图实现

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门觉得不错的记得点个赞????支持一下我0.0！谢谢了！不积跬步无以至千里，不积小流无以成江海。效果如下：代码及注释如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>无缝...
复制链接

扫一扫