纯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 = 0; i < imgs
  • 16
    点赞
  • 55
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue Splide是一款用TypeScript编写的轻量级轮播图组件,它没有任何依赖,代码简单清晰,体积小巧。它提供了多种轮播组合,包括单图轮播、N图轮播、聚焦轮播、分页轮播、垂直轮播等。它的轮播过程动画非常细腻,滑动效果流畅顺滑,末尾图片反弹效果也很流畅。\[1\] 在Vue3中使用Vue Splide进行轮播图滑动无缝的配置步骤如下: 第一步:安装配置 在main.ts文件中,使用以下代码安装Vue Splide: ```javascript import { createApp } from 'vue' import VueSplide from '@splidejs/vue-splide' const app = createApp(App) app.use(VueSplide) ``` 第二步:在Demo.vue文件中使用Vue Splide进行轮播图滑动无缝的示例代码如下: ```html <template> <Splide :options="{ rewind: true }"> <SplideSlide> <img src="http://localhost:9090/wego/ad/c1.jpg"> </SplideSlide> <SplideSlide> <img src="http://localhost:9090/wego/ad/c2.jpg"> </SplideSlide> <SplideSlide> <img src="http://localhost:9090/wego/ad/c3.jpg"> </SplideSlide> <SplideSlide> <img src="http://localhost:9090/wego/ad/c4.jpg"> </SplideSlide> <SplideSlide> <img src="http://localhost:9090/wego/ad/c5.jpg"> </SplideSlide> </Splide> </template> <script lang="ts" setup> import { Splide, SplideSlide } from '@splidejs/vue-splide' import '@splidejs/splide/dist/css/themes/splide-default.min.css' </script> ``` 以上是在Vue3中使用Vue Splide进行轮播图滑动无缝的配置和示例代码。你可以根据自己的需求进行相应的修改和定制。 #### 引用[.reference_title] - *1* *2* [Vue3轮播图插件 vue-splide](https://blog.csdn.net/lianghecai52171314/article/details/125818392)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值