切割轮播的前端案例

最新推荐文章于 2024-04-27 15:22:50 发布
最新推荐文章于 2024-04-27 15:22:50 发布
阅读量247 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_27314097/article/details/83018720
版权

效果
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/jquery.min.js"></script>
	<style>

		.container{
			position: relative;
			width: 560px;
			height: 300px;
		}
		.container ul{
			/*transform-style:preserve-3d;*/
			/*transform: rotateX(-30deg) rotateY(21deg);*/
			width: 560px;
			height: 300px;
			border:2px solid red;
			list-style-type: none;
			margin:0;
			padding:0;
		}
		.container ul li{
			position: relative;
			float: left;
			/*一张图分作5片，图的总宽度是560*/
			width: 112px;
			height: 300px;
			transform-style:preserve-3d;
			transition:all 0.5s;
		}
		.container ul li span{
			position: absolute;
			left:0;
			top:0;
			width: 100%;
			height: 100%
		}
		/*以下4个选择器设定立体效果*/
		.container ul li span:nth-child(1){
			background: yellow;
			transform:translateZ(150px);
		}
		.container ul li span:nth-child(2){
			background: pink;
			transform:translateY(-150px) rotateX(90deg);
		}
		.container ul li span:nth-child(3){
			background: orange;
			transform:translateZ(-150px) rotateX(180deg);
		}
		.container ul li span:nth-child(4){
			background: blue;
			transform:translateY(150px) rotateX(270deg);
		}
		/*//以下4个选择器设定第n个span的背景图*/
		.container ul li span:nth-child(1){
			background: url(images/1.jpg);
		}
		.container ul li span:nth-child(2){
			background: url(images/2.jpg);
		}
		.container ul li span:nth-child(3){
			background: url(images/3.jpg);
		}
		.container ul li span:nth-child(4){
			background: url(images/4.jpg);
		}
		/*以下5个选择器用于设定第i个li的背景定位*/
		.container ul li:nth-child(1) span{
			background-position: 0px 0px;
		}
		.container ul li:nth-child(2) span{
			background-position: -112px 0px;
		}
		.container ul li:nth-child(3) span{
			background-position: -224px 0px;
		}
		.container ul li:nth-child(4) span{
			background-position: -336px 0px;
		}
		.container ul li:nth-child(5) span{
			background-position: -448px 0px;
		}

		/*.container ul li:nth-child(1) span:nth-child(1){
			background: url(images/1.jpg) 0px 0px;
		}
		.container ul li:nth-child(2) span:nth-child(1){
			background: url(images/1.jpg) -112px 0px;
		}
		.container ul li:nth-child(3) span:nth-child(1){
			background: url(images/1.jpg) -224px 0px;
		}
		.container ul li:nth-child(4) span:nth-child(1){
			background: url(images/1.jpg) -336px 0px;
		}
		.container ul li:nth-child(5) span:nth-child(1){
			background: url(images/1.jpg) -448px 0px;
		}

		.container ul li:nth-child(1) span:nth-child(2){
			background: url(images/2.jpg) 0px 0px;
		}
		.container ul li:nth-child(2) span:nth-child(2){
			background: url(images/2.jpg) -112px 0px;
		}*/
			
		.container span.left, .container span.right{
			position: absolute;
			top:50%;
			background: rgba(0,0,0,0.3);
			width: 18px;
			height: 40px;
			font-size:25px;
			font-weight: bold;
			color:white;
			text-align: center;
			line-height: 40px;
			cursor:pointer;
		}
		.container span.left{
			left:0;
		}
		.container span.right{
			right:0;
		}
	</style>
</head>
<body>
	<div class="container">
		<ul>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
		</ul>
		<span class="left">&lt;</span>
		<span class="right">&gt;</span>
	</div>
</body>
</html>
<script>
	$(function(){
		var allowClick = true;
		var seq = 0;	//代表初始的转动角度次数
		//先给这5个li的动画效果设置不同的延时（delay)
		//index表示循环中的索引号，item表示当前项（这里是li）
		$("ul>li").each(   function(index,item){
			var delay_time = index*0.25;
			$(item).css({"transition-delay": delay_time + "s"});
		}  );

		//transitionend事件：动画结束事件
		$("ul>li:last-child").on('transitionend',function(){
			allowClick = true;		//允许点击
		});

		//
		$("span.left").on('click',function(){
			//如果allowClick为false，表示此时还不允许点击，就直接退出
			if(allowClick == false){ return ;}

			allowClick = false;	//如果可以继续下去，此时就会去执行动画，则此刻
								//就必须讲这个allowClick设定为false
			seq--;
			var angle = -seq*90;
			$("ul>li").css({"transform":"rotateX(" + angle + "deg)"});
		});
		$("span.right").on('click',function(){
			//如果allowClick为false，表示此时还不允许点击，就直接退出
			if(allowClick == false){ return ;}
			allowClick = false;
			seq++;
			var angle = -seq*90;
			$("ul>li").css({"transform":"rotateX(" + angle + "deg)"});
		});
	});
</script>
HansMa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端开发经典案例之vue框架开发电商项目百草味案例（二）
05-21
此课程为vue开发百草味项目的第二课，请先学习完第一课再学习第二课 把登录成功的用户信息记录到缓存中通过缓存来判断用户是否登录过用户登录成功之后把选中的商品加入到购物车中vuex进行数据处理在vuex仓库中对加入的商品的几种情况分别进行处理在vuex仓库中对商品数据处理完之后再更新到缓存中更新加入购物车数据的方法以及把购物车数量渲染在徽章中项目刚运行的时候在初始化函数中判断用户的登录状态项目刚运行的时候在初始化函数中从缓存中更新购物车的数据到仓库通过计算属性来开发计算总价格的功能在购物车组件中控制每一个商品的复选框在购物车组件中全选复选框和每一个商品复选框关联下载并且安装三级联动v-distpicker插件加入编辑地址功能处理视图层和数据层
40个适合前端初学者练手的基础案例（HTML&CSS）
m0_67846661的博客
05-26 4181
英文 | https://niemvuilaptrinh.medium.com/40-html-css-projects-for-beginner-2021-5bd01ff62361 翻译| 杨小爱 使用多个库进行网页设计会在一定程度上增加页面加载时间，并且难以应用于许多不同的项目。 所以，今天我将向您介绍使用纯 HTML 和 CSS 构建的组件效果。它将帮助您用于许多不同类型的 Web 项目，并进一步提高您在 HTML 和 CSS 方面的技能。 现在让我们一起去看看吧。 01、CSS 单选按钮.
这些前端案例看似很简单（内附动图）_前端经验案例
最新发布
2401_84435866的博客
04-27 659
在学习前端js操作元素的时候，往往有很多的案例的做法的思想都是一样的，我们一定要会。本篇文章将从几个小demo入手，带你领略js的风采。很常见的一些案例，一定要学会哦！！！
【前端】实际开发案例
热门推荐
我的的博客哦
12-08 1万+
基础的表单实例
前端开发常用案例（二）
qq_46199553的博客
02-18 3396
【代码】前端开发常用案例（二）
前端布局面典型案例
wgchen
05-28 910
这里写目录标题搭建web静态页面基础知识前端布局典型案例一、题目要求及页面效果示意图二、考点分析三、解答代码1）定位写法2）伸缩布局写法四、页面展示 搭建web静态页面基础知识 前端布局典型案例 一、题目要求及页面效果示意图 1）如下图布局，分为上下两栏，下面一栏又分左右两栏。上栏宽度为100%、高度为200px，下栏左侧栏宽度为100px，下栏右侧栏根据页面宽度自适应。请写出具体的HTML和css代码。 2）当浏览器宽度减少到700px后，顶部栏高度变为50px，下栏左侧栏消失，下栏右侧栏宽度为100%
javascript实现切割轮播效果
10-15
在这个实例中，我们看到的是一个基于CSS3的3D立体切割轮播效果，使用JavaScript进行控制和交互。 首先，我们需要理解HTML结构。在这个例子中，`<ul>`列表元素包含了一系列的`<li>`元素，每个`<li>`代表轮播中的一张...
前端轮播图案例（含详细注释）
10-22
仿淘宝前端轮播图的案例， 基本具有前端轮播图所有页面效果（无跳转） 1. 自动轮播，鼠标进入轮播区后变为手动控制； 2. 鼠标进入轮播区出现左右移控制箭头； 3. 图片由左右移箭头控制切换，并且底部轮播圆圈相应...
切割轮播图
09-21
"切割轮播图"是这种技术的一种变体，通过CSS3和jQuery来实现。这里我们将深入探讨如何利用这两种技术来创建一个切割轮播图。 首先，CSS3是层叠样式表的第三版，提供了许多增强的样式功能，如动画、转换和过渡。在...
前端JavaScript实现轮播图效果
04-11
在前端开发中，轮播图是一种常见的网页元素，用于展示多张图片或内容，并通过自动切换来节省页面空间。本文将详细介绍如何使用HTML、CSS和JavaScript实现一个具有自动切换和点击事件功能的轮播图。 首先，我们从...
Web前端开发经典案例之vue框架开发电商项目百草味案例（一）
05-21
此课程为第一课，学完第一课可以继续学习第二节课的内容 对要完成的案例的分析 通过脚手架创建Vue框架项目以及模块的划分 搭建python语言的Django框架的项目为前端传递所需要的数据 创建好首页，商品模块，购物车模块，订单模块，个人中心模块 创建各个模块的路由，让各个模块可以正常的运行起来 开发首页模块，导入触摸滑动的组件 开发商品分类模块，通过axios组件进行前后端的数据通信 首页导入触摸滑块插件 python端书写要返回前端的商品分类的数据 axios通过get请求从后端获取数据 通过axios把商品分类的数据从后端获取，并且渲染 书写python端返回前端数据的业务代码 商品列表部分的数据从后端获取再渲染 布局商品列表的组件以及购物车的组件
100个前端超经典实用的案例汇总
03-18
非常漂亮的100个前端案例，包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等等，只有你想不到，拿来即用。
WEB前端-案例汇总
11-08
WEB前端-案例汇总；史上最全的前端资源大汇总；适合初学者进阶，几乎涵盖前端开发所有案例。
HTML前端经典模板案例（视频+资料+代码）
03-28
HTML前端经典模板案例（视频+资料+代码），图片延迟加载，左侧悬浮导航，无缝滚动，页面弹窗，个人地图等。。
50个js经典案例
12-19
50个常用的js的案例，便于初学者更好的学习js
JS各种实例web前端
10-09
JS 实例 特效整理的各种JS特效 实例，时钟，跑马灯，弹出层，下拉菜单，隔行变色，幻灯片焦点图，图片点击放大，图片局部放大，div绝对居中等等etc
3D轮播图
努力，追梦的博客
08-01 1649
越努力越幸运-凡事老师 *{margin:0px;padding:0px;} /*banner style*/ .banner{width:989px;height:410px; margin:100px auto 0px;/*元素外边距*/position:relative;/*定位 相对定位 参照物*/} /*button style*/ .banner .
切割轮播图-节流阀（transitionend）
liuyuhua666的博客
05-03 423
一、css <style> * { margin: 0; padding: 0; list-style: none; } .box { width: 560px; height: 380px; /* border: 1px solid #000; */ margin: 10...
Web前端开发技术-综合案例（无缝轮播图）.pptx
07-07
本资源是一份关于Web前端开发的综合案例，主要聚焦于"无缝轮播图"和"留言板"功能，以及"电梯导航"的设计与实现。首先，无缝轮播图部分讲解了如何通过焦点图的横向排列、外边框设置和left值变化来实现图片的无缝切换...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值