纯JS实现左右滑动轮播图

效果图

(完整代码在最下面)
美末2属实⑧行

轮播图的功能要求

  • 每次只显示一张图片
  • 轮播图需要实现左右无缝切换
  • 需要实现跳转(放在圆点显示对应图片)
  • 当前图片的小圆点样式需要突出
  • 当鼠标放在图片上时,轮播停止
  • 在切换图片时鼠标放在图片上,取消轮播效果,切换到对应图片。

HTML布局与css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}

			body {
				background: #646863;
			}

			img {
				width: 1280px;
				height: 722px;
			}

			#banner {
				width: 1280px;
				height: 722px;
				overflow: hidden;
				position: relative;
			}

			#img_list {
				width: 7680px;
				height: 722px;
			}

			#img_list li {
				float: left;
			}

			#icon_list {
				position: absolute;
				right: 20px;
				bottom: 20px;
				list-style: none;
			}

			#icon_list li {
				color: #E69800;
				float: left;
				height: 50px;
				width: 50px;
				border: 5px solid cadetblue;
				border-radius: 50%;
				line-height: 50px;
				text-align: center;
				margin-right: 15px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<ul id="img_list">
				<li><img src="img3/preview1.jpg"></li>
				<li><img src="img3/preview2.jpg"></li>
				<li><img src="img3/preview3.jpg"></li>
				<li><img src="img3/preview4.jpg"></li>
				<li><img src="img3/preview1.jpg"></li>
			</ul>
			<ul id="icon_list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>

			</ul>
		</div>
		</body>
</html>

实现原理

每次只显示一张图片

  • 多余图片的隐藏
    在这里插入图片描述
    利用小盒子套大盒子,实现对图片的隐藏。

轮播图需要实现左右无缝切换

  • 轮播图的动态切换
    利用右外边距或左外边距的加减来操作整个放有图片div的移动,同时利用setTimeout()函数和计时器实现自动切换,从而达到图片无缝切换的效果
//得到图片的集合
var imgs = document.getElementById('img_list').getElementsByTagName('li');
//得到小圆点的集合
var icons = document.getElementById('icon_list').getElementsByTagName('li');
//初始左外边距默认为0px
var Left = 0;
//定义计时器
var timer;
			run();
			function run() {
   
				//图片切换到最后时,重新归零。
				if (Left <= -5120) {
   
					img_list.style.marginLeft = "0px";
					Left = 0;
				}
				//用n表示图片切换和停留的时间,如果刚好显示,停2000,否则以10的速度切换(Left持续-10,直到再次刚好显示图片)
				var n = (Left % 1280 == 0 ? 2000 : 10);
				changeimg();
				m = Math.floor(-Left / 1280);//切换小圆点样式的方法,此处暂且不提
				changeicon(m);//切换小圆点样式的方法,此处暂且不提
				Left -= 10;
				//重复执行run方法。实现一直轮播。
				timer = setTimeout(run, n);
			}

			function changeimg() {
   
				//切换图片的方法、
				img_list.style.marginLeft = Left + "px";
			}

需要实现跳转(放在圆点显示对应图片)

  • 为小圆点添加监听事件,当鼠标放在圆点上时,调用clearTimeout()方法停止轮播,调整计时器参数到固定值,使左右边距加减的滑动效果转为直接跳转到对应图片的效果,并在鼠标移出时重新启动轮播setTimeout()
// 变量作用域两种:全局变量、局部变量。js中函数内部可以读取全局变量,函数外部不能读取函数内部的局部变量。
			
			// js链式作用域:子对象会一级一级向上寻找所有父对象的变量,反之不行。
			// f2可以读取f1中的变量,只要把f2作为返回值,就可以在f1外读取f1内部变量
			for (var i 
  • 16
    点赞
  • 55
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
以下是一个简单的 JavaScript 轮播图代码,实现左右切换功能: HTML 代码: ```html <div class="slider"> <div class="slider-wrapper"> <img src="img1.jpg" alt="image1"> <img src="img2.jpg" alt="image2"> <img src="img3.jpg" alt="image3"> <img src="img4.jpg" alt="image4"> </div> <a href="#" class="slider-prev">Prev</a> <a href="#" class="slider-next">Next</a> </div> ``` CSS 代码: ```css .slider { position: relative; width: 100%; height: 400px; overflow: hidden; } .slider-wrapper { position: absolute; width: 400%; height: 100%; left: 0; transition: left .5s ease-in-out; } .slider-wrapper img { float: left; width: 25%; height: 100%; } .slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; color: #fff; background-color: rgba(0, 0, 0, 0.5); padding: 10px 20px; border-radius: 5px; text-decoration: none; } .slider-prev { left: 0; } .slider-next { right: 0; } ``` JavaScript 代码: ```javascript var sliderWrapper = document.querySelector('.slider-wrapper'); var sliderPrev = document.querySelector('.slider-prev'); var sliderNext = document.querySelector('.slider-next'); var slideIndex = 0; var slideWidth = sliderWrapper.clientWidth / 4; function moveSlider() { sliderWrapper.style.left = -slideIndex * slideWidth + 'px'; } sliderPrev.addEventListener('click', function(e) { e.preventDefault(); slideIndex--; if (slideIndex < 0) { slideIndex = 3; } moveSlider(); }); sliderNext.addEventListener('click', function(e) { e.preventDefault(); slideIndex++; if (slideIndex > 3) { slideIndex = 0; } moveSlider(); }); ``` 解释一下代码: 首先,通过 `document.querySelector()` 方法获取轮播图容器、上一个和下一个按钮,并定义初始的图片索引 `slideIndex` 和每张图片的宽度 `slideWidth`。 然后,定义一个 `moveSlider()` 函数,用来移动轮播图容器的位置,使其显示当前图片。该函数中,通过修改 `sliderWrapper` 的 `left` 属性来实现移动,每次移动的距离为 `slideIndex * slideWidth`。 最后,对上一个和下一个按钮分别添加点击事件监听器,当点击时修改 `slideIndex` 的值,再调用 `moveSlider()` 函数来移动轮播图容器。需要注意的是,当 `slideIndex` 的值超出图片数量时,需要将其重置为 0 或图片数量减 1,以实现循环切换的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值