html中简单轮播图实现原理,常见轮播效果及其实现原理
常見輪播效果及其實現(xiàn)原理
說明： 本項目只做最基礎的原理分析與最簡單的應用場景。
1. 簡單做法：css定位 + js滑動動畫
思路： 在同一個父容器內(nèi)，
1. 通過改變父容器的`left` 值實現(xiàn)---視圖切換，
2. 通過補充邊界視圖的過渡狀態(tài)，外觀上實現(xiàn)---無縫滾動。
核心代碼：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
思路： 在同一個父容器內(nèi)，
1. 通過改變各個仕途的過渡漸變，實現(xiàn)
核心代碼：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
思路： 在同一個父容器內(nèi)，
1. 通過各個視圖切換動畫實現(xiàn)
核心代碼：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旋轉(zhuǎn)：css3 + js旋轉(zhuǎn)
思路： 在同一個父容器內(nèi)，
1. 將各個視圖圍成正棱柱體，
2. 改變正棱柱體旋轉(zhuǎn)角度及視口距離，而實現(xiàn)無限滾動輪播
核心代碼：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 為調(diào)整值
transZ = 50/ Math.tan((rotate / 2 / 180) * Math.PI);
5. bootstrap：css3(transform：translate3d) + js
思路： 在同一個父容器內(nèi)，
1. 重點難點在于css3的過渡與漸變的應用；
2. 臨界狀態(tài)過渡處理；
3. 活動元素class：active->active left||right->'',下一個活動元素class：next left || prev right->active；
同一次狀態(tài)只改變兩個元素的class屬性；
核心代碼：bootstrap-carsoul.html
//css
/* 默認情況下 .item 元素隱藏*/
.carousel-inner>.item {
position: relative;
display: none;
transition: transform .6s ease-in-out;
}
/* 活動狀態(tài)的元素才顯示 */
.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev {
display: block;
}
/* 切換狀態(tài)，顯示目標元素 */
.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
思路： 在同一個父容器內(nèi)，
1. 活動元素顯示，非活動元素過渡切換狀態(tài)
核心代碼：bootstrap-carsoul.html
//css
/* 默認情況下 .item 元素隱藏*/
.carousel-inner>.item {
position: relative;
display: none;
transition: transform .6s ease-in-out;
}
/* 活動狀態(tài)的元素才顯示 */
.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev {
display: block;
}
/* 切換狀態(tài)，顯示目標元素 */
.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
總結(jié)
以上是生活随笔為你收集整理的html中简单轮播图实现原理,常见轮播效果及其实现原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 上传头像遇到的问题,An
- 下一篇： html tab选项卡 控件,tab选项