移动轮播 横屏切换效果

最新推荐文章于 2021-06-19 12:20:42 发布
最新推荐文章于 2021-06-19 12:20:42 发布
阅读量355 收藏
点赞数
文章标签： 轮播 横向移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44081699/article/details/86004264
版权

达成移动效果有两种方式 推荐学习第一种 如果看不懂的话可以把 .box 的 overflow: hidden; 去掉再看效果 就比较好理解

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			body {
				position: relative;
			}
			
			.box {
				position: absolute;
				width: 200px;
				height: 200px;
				left: 50%;
				overflow: hidden;
			}
			
			.box ul {
				position: absolute;
				left: -200px;
				display: flex;
			}
			
			.box li {
				width: 200px;
				height: 200px;
			}
			
			.but {
				width: 200px;
				position: absolute;
				left: 50%;
				top: 200px;
			}
			
			button {
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
  
	<body>
		<div class="box">
			<ul>
				<li style="background: red;">4</li>
				<li style="background:pink;">1</li>
				<li style="background: blue;">2</li>
				<li style="background: black;">3</li>
				<li style="background: red;">4</li>
				<li style="background: pink;">1</li>

			</ul>
		</div>
		<div class="but">
			<button><</button>
			<button>></button>

		</div>
		<script type="text/javascript">
			var but = document.getElementsByTagName("button")
			var oul = document.getElementsByTagName('ul')[0]
			var li = document.getElementsByTagName("li")[0]
			var win = li.offsetWidth
			console.log(li.offsetWidth)
			var a = 0
			var k = true
			but[1].addEventListener("click", function() {
				if (k) { 
					k = false
					a++
					oul.style.left = -(a + 1) * win + "px"
					oul.style.transition = "1s ease"
					console.log(oul.style.left)
					setTimeout(function() {
						k = true
						if (oul.style.left == "-1000px") {
							a = 0
							oul.style.left = -1 * win + "px"
							oul.style.transition = ""
						}
					}, 1200);
				}
				setTimeout(k, 1000)
			})
			but[0].addEventListener("click", function() {
				console.log(k)
				if (k) {
					k = false
					a--
					//	  		console.log(a)
					oul.style.left = -(a + 1) * win + "px"
					oul.style.transition = "1s ease"
					setTimeout(function() {
						k = true
						if (oul.style.left == "0px") {
							a = 3
							oul.style.left = -4 * (win) + "px"
							oul.style.transition = "none"
						}
						alert
					}, 1200);
				}
				setTimeout(k, 1000)
			})
		</script>
	</body>

</html>

简单理解的话 就是加5个图片 超出DIV的地方隐藏 然后改变UL的位置 形成一个横向切换的效果

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			body {
				position: relative;
			}
			
			.box {
				position: absolute;
				width: 200px;
				height: 200px;
				left: 50%;
				overflow: hidden;
			}
			
			.box ul {
				position: absolute;
				left: -200px;
				display: flex;
			}
			
			.box li {
				width: 200px;
				height: 200px;
			}
			
			.but {
				width: 200px;
				position: absolute;
				left: 50%;
				top: 200px;
			}
			
			button {
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
  
	<body>
		<div class="box">
			<ul>
				<li style="background: red;">4</li>
				<li style="background:pink;">1</li>
				<li style="background: blue;">2</li>
				<li style="background: black;">3</li>
				<li style="background: red;">4</li>
				<li style="background: pink;">1</li>

			</ul>
		</div>
		<div class="but">
			<button><</button>
			<button>></button>

		</div>
		<script type="text/javascript">
			var but = document.getElementsByTagName("button")
			var oul = document.getElementsByTagName('ul')[0]
			var li = document.getElementsByTagName("li")[0]
			var win = li.offsetWidth
			console.log(li.offsetWidth)
			var a = 0
			var k = true
			but[1].addEventListener("click", function() {
				if (k) { 
					k = false
					a++
					oul.style.left = -(a + 1) * win + "px"
					oul.style.transition = "1s ease"
					console.log(oul.style.left)
					setTimeout(function() {
						k = true
						if (oul.style.left == "-1000px") {
							a = 0
							oul.style.left = -1 * win + "px"
							oul.style.transition = ""
						}
					}, 1200);
				}
				setTimeout(k, 1000)
			})
			but[0].addEventListener("click", function() {
				console.log(k)
				if (k) {
					k = false
					a--
					//	  		console.log(a)
					oul.style.left = -(a + 1) * win + "px"
					oul.style.transition = "1s ease"
					setTimeout(function() {
						k = true
						if (oul.style.left == "0px") {
							a = 3
							oul.style.left = -4 * (win) + "px"
							oul.style.transition = "none"
						}
						alert
					}, 1200);
				}
				setTimeout(k, 1000)
			})
		</script>
	</body>

</html>

这是第二种方法 简易理解就是让每个已经切换的图片跳到ul的末尾
但是他的索引值会改变不是很好找
推荐第一个方法 简单易懂

刘一卓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery横向平滑移动轮播切换效果.zip
07-05
query横向平滑移动轮播切换效果是一款依次错位排列的多张图片通过运动依次展示的效果，兼容firefox、chrome和ie6、7、8等主流浏览器。
jquery层叠图片横向平滑移动轮播切换效果
11-17
本项目“jquery层叠图片横向平滑移动轮播切换效果”是利用jQuery实现的一种动态图片展示方式，通常被用于网站的首页或产品展示区域，以吸引用户的注意力并提供丰富的视觉体验。 一、jQuery轮播原理 轮播切换效果的...
html 横向轮播图片,JS实现横向轮播图（初级版）
weixin_39966740的博客
06-19 833
本文实例为大家分享了JS实现横向轮播图的具体代码，供大家参考，具体内容如下描述：轮播图，初级，横向buton或者底部数字控制轮播，可以实现自动轮播(注释了，使用的话将其注释消掉)，核心知识是数据驱动图像的位移达到效果。效果：代码：js文件：/** 工厂模式* */var Method=(function () {return {loadImage:function (arr,callback) {...
轮播图之横向滚动
WangYuJiao的博客
08-18 2395
轮播图之横向滚动代码 html+css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
移动端横向滑屏之轮播图
weixin_34281537的博客
11-29 523
图片描述 移动端的轮播图可以有很多方式实现，最常见的可以使用定位 + 手指事件。但是我这里介绍的是 CSS3 中的 2d 变换和手指事件，因为变换属性的代码更加简洁优雅 一. 移动端的准备工作 * { padding: 0; margin: 0; } img { display: block; } li { ...
h5横屏切换项目小程序
09-07
【标题】"h5横屏切换项目小程序"是一个专门针对MBA推广营销设计的H5应用，它具有独特的横屏切换功能，旨在提供一个引人入胜的用户体验。H5技术，全称HTML5，是超文本标记语言的最新版本，它在网页交互性和多媒体支持...
jquery横向平滑依次错位排列的移动轮播切换效果.zip
11-06
标题中的“jquery横向平滑依次错位排列的移动轮播切换效果”指的是使用jQuery库实现的一种动态、平滑且有视觉吸引力的轮播切换效果。这种效果通常在网站上用于展示图片或内容，使得用户可以方便地浏览一系列项目，而...
jQuery商品图片横向轮播代码
06-24
- 增加触屏滑动支持：对于移动设备，可以通过监听`touchstart`、`touchmove`和`touchend`事件实现滑动手势切换。 - 缓存图片状态：防止快速切换时图片未完全加载导致闪烁，可以预先加载下一张图片或者使用预加载技术...
swiper效果（竖向切换）
热门推荐
pacholy的博客
09-04 2万+
swiper纵向切换效果 因为上一篇文档在介绍vue项目中使用swiper的方法，所以这个例子我直接在vue项目里写的。当然html页面里和这个差不多。 话不多说，上代码。slide里面的样式和内容可以根据自己的需求去写，我主要是为了展示功能，就写了一个简单的效果。 &amp;lt;!-- 组件的模板 --&amp;gt; &amp;lt;template&amp;gt; &amp;lt;div class=&quot;car&quo
横向轮播图
03-10
横向轮播图
Flash 3D Banner 横屏大幅广告图循环代码
05-12
内容索引:脚本资源,HTML,图片切换　　一款Flash 3D 横屏大幅广告图循环代码，这里的3D主要是针对大图片中的缩略图来说的，当用鼠标点击任意一个缩略图的时候，三个小图旋转至对应图片，具有空间纵深感，所以称之为3D，设计类、图片类、娱乐类网站适合使用。
移动页面横竖屏切换提示
a36267862的博客
05-02 3543
转载：http://www.xuanfengge.com/move-pages-anyway-screen-tips.html前言在制作移动页面的时候常会考虑页面在不同手机分辨率下的显示效果，通过一些布局技巧使页面从最小的iphone4 兼容至 较大的iphone6 plus及其他android手机。然而却常常忽略了一个小细节：用户在使用时有时会切换横/竖屏，而制作页面的时候很少考虑用户切换后的效...
Swiper滑动Html5手机浏览器自适应
hsany330的专栏
07-24 4753
Swiper滑动Html5手机浏览器自适应 分类： 代码片段2015-06-10 15:21 281人阅读 评论(0) 收藏 举报 手机网页能通过window.screen.height, width获取屏幕分辨率，于是可以通过分辨率比率来计算高度。 [html] view plaincopy window.onload=
swiper3d横向滚动多张炫酷切换banner
weixin_30872733的博客
10-09 513
最近有了个新需求，swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似，但是还需要h5手机触摸滚动啊啊啊啊，昨天折腾了半个早上总算完成，今天乖乖跑来mark一下。一眨眼过了一个月，9月这段期间项目多，还带着小徒弟做项目，一边教还要一边赶进度。真的是超级无敌累，不过看着他慢慢有所成长也是有点欣慰的。终归还是自己懒，放草稿箱里的文章总结就一直...
使用css实现炫酷的横屏滚动效果
dengze1959的博客
05-13 1986
炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是不知道你有没有看过一些横屏滚动的网站,这样的网站在一众竖屏网页中鹤立鸡群,很容易达到吸人眼球的效果. 花时间谷歌了一下,发现实现方法是真的不少,你可以用inline-block加上no-...
swiper的介绍以及使用（移动端滑动屏幕切换页面案例）
qq_36742720的博客
11-04 5517
一、swiper介绍 Swiper常用于移动端网站的内容触摸滑动  Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。  Swiper能实现轮播图、触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。  Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 二、swiper使用 在swiper官网中提供了很多经典案例，这里给大家...
android横向分页轮播,JS实现分页浏览横向图片(类轮播)实例代码
weixin_33877700的博客
05-26 138
昨天朋友问我怎么用js实现分页浏览横向图片功能，其实实现代码很简单的，下面小编给大家带来了具体实现代码，代码如下所示：common.jsfunction $(id) {return document.getElementById(id);}function $_tag(tag) {return document.getElementsByTagName(tag);}index.htmlDocume...
竖屏转横屏 Activity的切换效果
Black.C的博客
01-16 1621
近来有个需求，使我不得不用竖屏来写横屏的界面，虽略显蛋疼，但也成功写出，但Activity的转换过渡效果不同，十分纠结，终于找到一个overridePendingTransition的方法，经过一番研究把竖屏切横屏的动画效果大致搞出来了，项目地址在：http://download.csdn.net/detail/u014335844/9738557
vue 轮播图飞屏效果
最新发布
04-04
Vue中实现轮播图飞屏效果，需要用到CSS3动画和Vue的过渡动画。具体实现步骤如下： 1. 给轮播图容器添加一个overflow:hidden的样式，隐藏超出容器的部分。 2. 使用Vue的过渡动画，在每次切换轮播图时，给当前轮播图和下一个轮播图添加不同的过渡动画class，从而实现轮播图的飞屏效果。 3. 在CSS中定义过渡动画class，为轮播图添加动画效果。可以使用CSS3中的translate3d和transition属性，实现从左到右的滑动动画效果。 4. 最后，设置轮播图容器的宽度和高度，以适应不同的屏幕尺寸和轮播图大小。 以下是一个基本的轮播图飞屏效果的Vue组件代码： ```html <template> <div class="carousel-container"> <transition-group tag="ul" name="carousel"> <li v-for="(image, index) in images" :key="index" :style="{ backgroundImage: 'url(' + image + ')' }"></li> </transition-group> </div> </template> <script> export default { data() { return { images: [ 'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg' ], currentIndex: 0, timer: null } }, mounted() { this.startCarousel() }, methods: { startCarousel() { this.timer = setInterval(() => { this.currentIndex = (this.currentIndex + 1) % this.images.length }, 3000) } } } </script> <style scoped> .carousel-container { position: relative; width: 100%; height: 400px; overflow: hidden; } .carousel-container ul { position: absolute; top: 0; left: 0; width: 100%; height: 100%; list-style: none; margin: 0; padding: 0; } .carousel-container li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; will-change: transform; } .carousel-enter-active, .carousel-leave-active { transition: transform 0.5s ease; } .carousel-enter, .carousel-leave-to { transform: translate3d(100%, 0, 0); } .carousel-enter-to, .carousel-leave { transform: translate3d(-100%, 0, 0); } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值