フロントエンド: html+css+js を使用して、Huya ライブ ブロードキャストでカルーセル画像効果を実現します。

プログラミング 2023-08-06 18:52:34 訪問数: null

ここに画像の説明を挿入

フロントエンド: html+css+js を使用して、Huya ライブ ブロードキャストでカルーセル画像効果を実現します。

1. 私の気づき効果

最近、Huya のライブ ブロードキャストをよく見て、上のカルーセル画像がうまく機能することがわかりました。純粋な html+css+js を使用して上記の操作効果を達成する予定の場合、最終的な効果はまだ異なりますが、もちろん、カルーセルの実装についてさらに詳しく知りたい場合は、この編集者のブログ (より基本的なもの) を参照してください。 end:カルーセルを実現するための HTML+CSS+JavaScriptエディターによって達成される効果は次のとおりです (少なくとも 4 つの画像が必要です)。

フロントエンド: html+css+js を使用して、Huya ライブ ブロードキャストでカルーセル画像効果を実現します。

2. フロントエンドインターフェースの設定

カルーセル画像のエフェクトを表現するのが主な目的ですので、エフェクト部分は左右中央に配置されています画像の説明を追加してください
絶対配置、相対配置等が用いられます 画面内で画像の位置が異なりますこれは、対応するラベル要素の left value 属性を設定することで実現されます。
画像の説明を追加してください
読者にカルーセル上の関連するレイアウトについて詳しく知ってもらうために、編集者は意図的に次のように画像のレイアウトを描画します。
画像の説明を追加してください
上記の画像内の画像のサイズは編集者によって計算されます。

3. 映像アニメーション効果の実現

2 つのタイマーが使用されます。内側のタイマーは画像アニメーションを実現するために使用され、外側のタイマーは画像アニメーション間の休止時間を実現するために使用されます。これは、エディターがそれぞれの関連する左の値を使用するため、休眠関数と同等です。 jsコード内の画像 変更は小さいため、実際に使用する場合はいくつかのバグがあるため、読者がそれを使用する必要がある場合は、私のものに基づいて左の値を改善できます。もちろん、一部のデータも変更する必要がありますそれに応じて（計算する必要があります）。画像の説明を追加してください
エディターの JS コードには単純化されていない繰り返しコードが含まれているため、合計コードは 200 行を超えていますが、単純化後は 100 行を超える程度になるはずです。画像の説明を追加してください
上の図では、内部タイマーによって 1ms ごとに動作が実行され、関連するピクセルの最大変化は 2px を超えないため、効果は少し遅くなります。

4. 一般的なコード

  1. フロントエンドコード
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="main">
        <ul>
            <!-- li标签的个数至少为4个 -->
            <li class="pre-ele">
                <img src="1.jpg" alt="">
            </li>
            <li class="cur-ele">
                <img src="2.jpg" alt="">
            </li>
            <li class="next-ele">
                <img src="3.jpg" alt="">
            </li>
            <li class="other-ele">
                <img src="0.jpg" alt="">
            </li>
        </ul>
        <div class="left">
            <
        </div>
        <div class="right">
            >
        </div>
    </div>
</body>

<script src="main.js"></script>
</html>
  1. スタイルコード
*{
    
    
    margin: 0;
    padding: 0;
}

ul{
    
    
    list-style: none;
}

.main{
    
    
    height: 270px;
    width: 800px;
    margin: 20px auto;
    position: relative;
}

.main ul{
    
    
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.main ul li{
    
    
    position: absolute;
}

.main ul li >img{
    
    
    display: block;
    width: 100%;
    height: 100%;
}

.main >div{
    
    
    position: absolute;
    top: 0;
    font-size: 18px;
    line-height: 270px;
    display: none;
    cursor: pointer;
    z-index: 3;
}

.main >div:hover{
    
    
    background: rgba(255, 255, 255, 0.3);
}

.left{
    
    
    left: 0;
}

.right{
    
    
    right: 0;
}
  1. jsコード


const eles = document.querySelectorAll('.main ul >li');
// 所以的li标签元素

const li_width = 300,li_height = 230;

// 初始化
for(let i=0;i<eles.length;i++){
    
    
    let ele = eles[i];
    
    ele.style.left = 200 + (i - 1)*300 +'px';
    ele.style.top = 20 + 'px';
    ele.style.width = li_width + 'px';
    ele.style.height = li_height + 'px';
    ele.style.opacity = 0.4;
    ele.style.zIndex = 1;
    if(i == 0){
    
    
        ele.style.left = 0;    
    }

    if(ele.className == 'cur-ele'){
    
    
        ele.style.left = 237 + 'px';
        ele.style.top = 10 + 'px';
        ele.style.width = 326 + 'px';
        ele.style.height = 250 + 'px';
        ele.style.opacity = 1;
        ele.style.zIndex = 2;
    }
    
}


var timer,timer2;
// 两个定时器

timer = setInterval(fun1,5000);
// 外部定时器
function fun1(){
    
    
    timer2 = setInterval(fun2,1);
}
// 向左移动
function fun2(){
    
    
    for(let i=0;i<eles.length;i++){
    
    
        ele = eles[i];
        let li_w = parseFloat(ele.style.width);
        let li_h = parseFloat(ele.style.height);
        let li_l = parseFloat(ele.style.left);
        let li_t = parseFloat(ele.style.top);

        if(ele.className == 'cur-ele'){
    
    
            li_l -= 1;
            li_t += 0.042;
            li_w -= 0.109;
            li_h -= 0.084;
        }else if(ele.className == 'next-ele'){
    
    
            li_l -= 1.109;
            li_t -= 0.042;
            li_w += 0.109;
            li_h += 0.084;
        }else{
    
    
            li_l -= 1.26;
        }

        if (ele.className == 'cur-ele' && li_l <= 0) {
    
    
            fun3();
            clearInterval(timer2);
        }
        
        ele.style.left = li_l + 'px';
        ele.style.top = li_t + 'px';
        ele.style.width = li_w + 'px';
        ele.style.height = li_h + 'px';

    }
}

function fun3(){
    
    
    let index = -1;
    for(let i=0;i<eles.length;i++){
    
    
        let ele = eles[i];
        let li_l = parseFloat(ele.style.left);

        ele.style.top = 20 + 'px';
        ele.style.width = li_width + 'px';
        ele.style.height = li_height + 'px';

        // pre-ele
        if(li_l < 0){
    
    
            ele.style.left = 800 + 'px';
            ele.className = 'other-ele';
        }else if(ele.className == 'cur-ele'){
    
    
            ele.style.left = 0;
            ele.className = 'pre-ele';
            ele.style.opacity = 0.4;
            ele.style.zIndex = 1;
        }else if(ele.className == 'next-ele'){
    
    
            ele.className = 'cur-ele';
            index = (i+1) % 4;
            ele.style.opacity = 1;
            ele.style.top = 10 + 'px';
            ele.style.left = 237 + 'px';
            ele.style.height = 250 + 'px';
            ele.style.width = 326 + 'px';
            ele.style.zIndex = 2;
        }
    }

    if(index !=-1){
    
    
        eles[index].className = 'next-ele';
        ele.style.left = 500 + 'px';
    }
}

// 向右移动
function fun4(){
    
    
    for (let i = 0; i < eles.length; i++) {
    
    
        ele = eles[i];
        let li_w = parseFloat(ele.style.width);
        let li_h = parseFloat(ele.style.height);
        let li_l = parseFloat(ele.style.left);
        let li_t = parseFloat(ele.style.top);

        if (ele.className == 'cur-ele') {
    
    
            li_l += 1;
            li_t += 0.038;
            li_w -= 0.0988;
            li_h -= 0.076;
        } else if (ele.className == 'pre-ele') {
    
    
            li_l += 0.901;
            li_t -= 0.038;
            li_w += 0.0988;
            li_h += 0.076;
        } else {
    
    
            li_l += 1.14;
        }

        if (ele.className == 'cur-ele' && li_l >= 500) {
    
    
            fun5();
            clearInterval(timer2);
        }
     
        ele.style.left = li_l + 'px';
        ele.style.top = li_t + 'px';
        ele.style.width = li_w + 'px';
        ele.style.height = li_h + 'px';

    }
}


function fun5(){
    
    
    let index = -1;
    for (let i = 0; i < eles.length; i++) {
    
    
        let ele = eles[i];

        ele.style.top = 20 + 'px';
        ele.style.width = li_width + 'px';
        ele.style.height = li_height + 'px';

        // pre-ele
        if (ele.className == 'next-ele') {
    
    
            ele.style.left = -300 + 'px';
            ele.className = 'other-ele';
        } else if (ele.className == 'cur-ele') {
    
    
            ele.style.left = 500 + 'px';
            ele.className = 'next-ele';
            ele.style.opacity = 0.4;
            ele.style.zIndex = 1;
        } else if (ele.className == 'pre-ele') {
    
    
            ele.className = 'cur-ele';
            index = (i - 1 + 4) % 4;
            ele.style.opacity = 1;
            ele.style.top = 10 + 'px';
            ele.style.left = 237 + 'px';
            ele.style.height = 250 + 'px';
            ele.style.width = 326 + 'px';
            ele.style.zIndex = 2;
        }
    }

    if (index != -1) {
    
    
        eles[index].className = 'pre-ele';
        ele.style.left = 0;
    }
}

function start(){
    
    
    timer = setInterval(fun1, 5000);
}

function stop(){
    
    
    clearInterval(timer2);
    clearInterval(timer);
}

window.addEventListener('focus',()=>{
    
    
    start();
});


window.addEventListener('blur',()=>{
    
    
    stop();
})


const ele2s = document.querySelectorAll('.main >div');
const main = document.querySelector('.main');
// 鼠标进入轮播图区域，轮播图暂停
main.onmouseover = function(){
    
    
    stop();
    for (let e of ele2s) {
    
    
        e.style.display = 'block';
    }
}
// 鼠标离开轮播图区域，轮播图继续播放
main.onmouseout = function () {
    
    
    let other_ele = document.querySelector('.other-ele');
    other_ele.style.left = 800 + 'px';
    for (let e of ele2s) {
    
    
        e.style.display = 'none';
    }
    start();
}

const left = document.querySelector('.left');
const right = document.querySelector('.right');

left.onmouseover = ()=>{
    
    
    let other_ele = document.querySelector('.other-ele');
    other_ele.style.left = 800 + 'px';
}

left.onclick = ()=>{
    
    
    fun1();
}


right.onmouseover = ()=>{
    
    
    let other_ele = document.querySelector('.other-ele');
    other_ele.style.left = -300 + 'px';
}

right.onclick = () => {
    
    
    timer2 = setInterval(fun4,1);
}

js コードを理解していない読者は、ポイント 1 で述べたブログを読んでください。非常に基本的な内容です。

おすすめ

転載: blog.csdn.net/qq_45404396/article/details/131607490
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com