常見輪播效果及其實現原理

說明： 本項目只做最基礎的原理分析與最簡單的應用場景。

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中简单轮播图实现原理,常见轮播效果及其实现原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。