html中简单轮播图实现原理,常见轮播效果及其实现原理
常见轮播效果及其实现原理
说明: 本项目只做最基础的原理分析与最简单的应用场景。
1. 简单做法:css定位 + js滑动动画
思路: 在同一个父容器内,
1. 通过改变父容器的`left` 值实现---视图切换,
2. 通过补充边界视图的过渡状态,外观上实现---无缝滚动。
核心代码:custom-carsoul.html || simple-slide.html
//css
#container {
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden;
position: relative;
}
#list {
width: 3000px;
height: 400px;
position: absolute;
z-index: 1;
}
#list div {
float: left;
display: flex;
justify-content: center;
background: #ccc;
width: 600px;
height: 300px;
}
//js
var go = function() {
if ((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go, inteval);
} else {
list.style.left = left + 'px';
if (left > -200) {
list.style.left = -600 * len + 'px';
}
if (left < (-600 * len)) {
list.style.left = '-600px';
}
animated = false;
}
}
2. css渐变:css-transition
思路: 在同一个父容器内,
1. 通过改变各个仕途的过渡渐变,实现
核心代码:css3-transition.html
//css
#slideshow img {
width: 800px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s linear;
}
#slideshow img.active {
opacity: 1;
}
3. css动画:css-animate
思路: 在同一个父容器内,
1. 通过各个视图切换动画实现
核心代码:css-animate.html
//css
@keyframes slide {
0% {
background-position: 0 0;
}
10%, 25% {
background-position: -600px 0;
}
35%, 50% {
background-position: -1200px 0;
}
60%, 75% {
background-position: -1800px 0;
}
85%, 100% {
background-position: 0 0;
}
}
4. css3D旋转:css3 + js旋转
思路: 在同一个父容器内,
1. 将各个视图围成正棱柱体,
2. 改变正棱柱体旋转角度及视口距离,而实现无限滚动轮播
核心代码:3d-transform.html
//css
.container {
width: 150%;
height: 100px;
transition: transform 1s;
transform-style: preserve-3d;
position: absolute;
}
//js
function transform(element, value) {
return element.style['transform'] = value;
}
//50 为调整值
transZ = 50/ Math.tan((rotate / 2 / 180) * Math.PI);
5. bootstrap:css3(transform:translate3d) + js
思路: 在同一个父容器内,
1. 重点难点在于css3的过渡与渐变的应用;
2. 临界状态过渡处理;
3. 活动元素class:active->active left||right->'',下一个活动元素class:next left || prev right->active;
同一次状态只改变两个元素的class属性;
核心代码:bootstrap-carsoul.html
//css
/* 默认情况下 .item 元素隐藏*/
.carousel-inner>.item {
position: relative;
display: none;
transition: transform .6s ease-in-out;
}
/* 活动状态的元素才显示 */
.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev {
display: block;
}
/* 切换状态,显示目标元素 */
.carousel-inner>.item.active,
.carousel-inner>.item.next.left,
.carousel-inner>.item.prev.right {
left: 0;
transform: translate3d(0, 0, 0);
}
/* 切换过程,前后两个元素的过度 */
.carousel-inner>.item.active.left,
.carousel-inner>.item.prev {
left: 0;
transform: translate3d(-100%, 0, 0);
}
.carousel-inner>.item.active.right,
.carousel-inner>.item.next {
left: 0;
transform: translate3d(100%, 0, 0);
}
//js(mocking up)
window.onload = function() {
var items = document.querySelectorAll('.carousel-inner .item');
var prev = document.querySelector('#prev');
var next = document.querySelector('#next');
var animated = false;
var cur = 0;
var duration = 600;
function moveTo(i) {
animated = true;
if (i > 0) {
cur = cur === 2 ? 0 : cur + i;
var cLeft = cur - i === -1 ? 2 : cur - i;
transition(cur, cLeft, 'next', 'left')
} else {
cur = cur === 0 ? 2 : cur + i;
var cRight = cur - i === 3 ? 0 : cur - i;
transition(cur, cRight, 'prev', 'right')
}
function transition(cur, cx, order, direction) {
items[cx].classList.add(direction);
items[cur].classList.add(order, direction);
setTimeout(() => {
items[cx].classList.remove('active', direction);
items[cur].classList.remove(order, direction);
items[cur].classList.add('active');
animated = false;
}, duration);
}
}
prev.onclick = function() {
if (animated) {
return
}
moveTo(-1);
}
next.onclick = function() {
if (animated) {
return
}
moveTo(1);
}
}
6. css变换:css3(transform)||css3 transition
思路: 在同一个父容器内,
1. 活动元素显示,非活动元素过渡切换状态
核心代码:bootstrap-carsoul.html
//css
/* 默认情况下 .item 元素隐藏*/
.carousel-inner>.item {
position: relative;
display: none;
transition: transform .6s ease-in-out;
}
/* 活动状态的元素才显示 */
.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev {
display: block;
}
/* 切换状态,显示目标元素 */
.carousel-inner>.item.active,
.carousel-inner>.item.next.left,
.carousel-inner>.item.prev.right {
left: 0;
transform: translate3d(0, 0, 0);
}
/* 切换过程,前后两个元素的过度 */
.carousel-inner>.item.active.left,
.carousel-inner>.item.prev {
left: 0;
transform: translate3d(-100%, 0, 0);
}
.carousel-inner>.item.active.right,
.carousel-inner>.item.next {
left: 0;
transform: translate3d(100%, 0, 0);
}
//js
html中简单轮播图实现原理,常见轮播效果及其实现原理相关推荐
- 利用swiper在vue中做轮播图,并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
- axure轮播图怎么设置循环轮播_Axure教程:轮播图制作步骤详解
不管是在PC端还是移动端,轮播图是常见的设计元素.下面详细讲解轮播图的制作步骤. 作为Axure初学者,把最近学到的记录下来,和大家一起学习. 如何实现轮播图: 循环展示轮播图片: 将圆点与轮播图一一 ...
- js原生 JavaScript轮播图【渐变淡入淡出】效果实现(附代码)
目录 前言 轮播图的组成以及实现思想 左右按钮的隐藏与显示 核心思想 代码实现 动态生成底部小圆圈 核心思想 代码实现 右左按钮实现 核心思想 代码实现 实现自动播放 核心思想 代码实现 整体代码(复 ...
- 在html中轮播图怎么做,HTML轮播图怎么做
回答:基础准备工作 1.打开Axure,页面名称命名为"图片轮播":在左侧部件(线框图)中,选择动态面板,左键选中,并按住左键,拖动其至工作台页面中,在上方菜单栏将宽调整为400, ...
- JS轮播图(网易云轮播图)
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- android轮播图实现方案,Android轮播图实现教程
ListView的headerView设置为轮播图之后结合上/下拉刷新/加载的模式成为现在大多数APP的一个必须具备的功能,对于许多初学者来说想要实现轮播图这样一个集线程睡眠.自动处理.替换过程中刷新 ...
- html图片轮播思路,css3如何实现轮播图?css3实现轮播图片的方法
我们在网页上经常会看到有一块位置会有很多的图片来回切换,这就是轮播图,轮播图的出现,让重要的信息可以在一个位置显现,那么,轮播图是如何实现的呢?轮播图的实现用js或者css都可以,本篇文章就来给大家介 ...
- css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...
- bootstrap 两个轮播图冲突_Bootstrap的轮播图样式
轮播效果是一个幻灯片效果,使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放,它适用于一系列图像.文本或自定义标记,还包括对上一个/下一个图的浏览控制和指令支持. 轮播组件不支持互相 ...
最新文章
- Uva 10048 - Audiophobia (Floyd变形)
- python降序排列说true不存在_Python数据类型串讲(中)
- 机器学习基础——支持向量机
- 当SQL Server爱上Linux:AVAILABILITY_MODE 和 DataGuard 的实践差距
- 典型的php系统由什么组成,完整的计算机系统由什么组成
- 西门子PLC与DCS通讯
- 根据贷款还款方式(等额本金,等额本息,等本等息,先息后本),计算本息
- Cesium中添加entitie模型,实现贴地。
- 【FastAPI后台API 一】配置文件(移步博客园或个人网站)
- JVM和Java体系架构
- Python大疆相片/航片/照片的内容信息获取:以m300为例JPG
- BPMN2.0规范简述
- 从 pdf 中提取表格信息、合并、解析、输出数据
- poly-yolo笔记
- 【亲测】后期特效合成软件:Nuke 13 Mac版(支持m1)
- Spring Integration
- 为何政企偏爱阿里云混合云?这三张王牌是关键
- 动态规划练习一 17:开餐馆
- iOS之命名规范+编码规范
- 1095: C语言程序设计教程(第三版)课后习题10.2
热门文章
- Ubuntu 14.04 DNS 配置
- MySQL 的备份和恢复机制 MyISAM 和 Innodb
- 今天痛下决心,把开发人员的外网给断了,不断是不好管了,人心散了队伍就不好带...
- 重磅开源!推荐一个以最优惠的方式购买极客时间课程的开源项目!
- “ShardingCore”是如何针对分表下的分页进行优化的
- vue组件的基本使用:入门示例
- vue的插值语法及el和data、methods语法释义
- kafka-eagle报错解决:Kafka version is “-“ or JMX Port is “-1“ maybe kafka broker jmxport disable.
- hadoop yarn配置任务优先级
- vue商城项目开发:封装banner组件、组件参数传递