インジケーターの左右に配置されたカルーセルをHTMLで実装する方法（完全なコード）-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

インジケーターの左右に配置されたカルーセルをHTMLで実装する方法（完全なコード）

不言

Sep 07, 2018 pm 05:22 PM

html

この記事の内容は、インジケーターの左右に配置されたカルーセルをHTMLで実装する方法（完全なコード）です。必要な友人が参考になれば幸いです。あなたへ。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>

    <style>

/*us-banner*/
.py-aboutUs .aboutUs-ele .us-banner .usban-ula li{
    width: 240px;
    height: 86px;
    line-height: 86px;
    background: #05dafb;
    border-radius: 5px;
    margin-bottom: 11px;
    text-align: center;
    font-size: 17px;
}
.py-aboutUs .aboutUs-ele .us-banner .usban-ula .hover-li{
    background: white;
}

.py-aboutUs .aboutUs-ele .us-banner .usban-ula li:last-child{
    margin-bottom: 0;
}

.usban-ulb{
    width: 384px;
    height: 244px;
    overflow: hidden;
    position: relative;
    margin-top: 18px;
}
.usban-ulb>a{
    display: block;
    width: 384px;
    height: 244px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
}
.usban-ulb>a:first-child{
    z-index: 30;
}
.usban-ulb>a img{
    width: 100%;
    height: 100%;
}
.usban-ulb>a .usban-ula-p{
    width: 384px;
    line-height: 20px;
    background: rgba(0,0,0,0.7);
    font-size: 12px;
    text-align: left;
    color: white;
    box-sizing: border-box;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
}
.py-aboutUs .aboutUs-ele .eleven-btn{
    width: 267px;
    height: 65px;
    line-height: 65px;
    background-size: 100% 100%;
    margin: 43px auto;
    font-size: 18px;
}
.py-aboutUs .aboutUs-ele .usEle-learn{
    width: 1200px;
    height: 810px;
    margin: 120px auto;
}

    </style>
</head>
<body>

<p class="us-banner" id="usBanner">
                <ul class="usban-ula">
                <li class="usli hover-li" value="0">调查系统</li>
                <li class="usli"  value="1">考试系统</li>
                <li class="usli"  value="2">面试题系统</li>
            </ul>
            <p class="usban-ulb" id="usbanLb">
                <a href="javascript:;">
                    <img src="/static/imghwm/default1.png"  data-src="public/img/9-year6.png"  class="lazy"   alt="调查系统1">
                    <p class="usban-ula-p">从学习期间，每天老师会在系统内提出当天学习要点，学员必须选择是否已掌握，如果有学员选择没有掌握，系统自动提示该学员某部分知识没掌握，晚自习老师进行针对性辅导，直到完全学员彻底学会</p>
                </a>

                <a href="javascript:;">
                    <img src="/static/imghwm/default1.png"  data-src="public/img/9-year4.png"  class="lazy"   alt="考试系统2">
                    <p class="usban-ula-p">从入学到毕业，采用分几段进阶模式教学，每完成一个阶段学习学员必须要通过考试，成绩合格才能进行下一阶段学习，同时将全部考试和阶段测试进行收集分析，生成个人学习成绩库，老师可以在第一时间发现学员可能在哪个阶段遇到学习困难和问题，并及时解决。</p>
                </a>

                <a href="javascript:;">
                    <img src="/static/imghwm/default1.png"  data-src="public/img/9-year1.jpg"  class="lazy"   alt="面试题系统3">
                    <p class="usban-ula-p">面试真题库全部由动力节点学员收集整理，每月定时更新，每道题目动力节点老师都会进行详细解析，提供面试思路，帮助学员入职名企，拿高薪。</p>
                </a>

                <a href="javascript:;">
                    <img src="/static/imghwm/default1.png"  data-src="public/img/9-year2.jpg"  class="lazy"   alt="评价系统4">
                    <p class="usban-ula-p">学员登陆系统根据自己学习感受对老师打分，包括教学质量，教学服务，以及个人意见等5项评价意见进行反馈，学生反馈的信息将直接和授课老师收入挂钩，从而严格约束老师，必须达到授课质量和服务标准要求。
                </p>
                </a>

                <a href="javascript:;">
                    <img src="/static/imghwm/default1.png"  data-src="public/img/9-year5.png"  class="lazy"   alt="智能考勤系统5">
                    <p class="usban-ula-p">动力节点智能考勤系统，采用了 Ai 人脸识别黑科技与后台数据交互传递，学员每天按时打卡后数据智能生成到考勤数据库，快速记录每天出勤情况，可以快速对学员学习进行有效的监督的考评。</p>
                </a>

                <a href="javascript:;">
                    <img src="/static/imghwm/default1.png"  data-src="public/img/9-year3.jpg"  class="lazy"   alt="学员圈子6">
                    <p class="usban-ula-p">上万名的 VIP 学员学员交流圈，把优秀的人聚集在一起，扩展人脉，让知识共享，裂变，为己所用。加入动力节点大家庭学哥，学姐，学弟，学妹，都是你成功路上的宝贵资源</p>
                </a>
            </p>
            <ul class="usban-ula">
                <li class="usli"  value="3">评价系统</li>
                <li class="usli"  value="4">智能考勤</li>
                <li class="usli"  value="5">学员圈子</li>
            </ul>
</p>







<script src="public/js/jquery-3.1.1.min.js"></script>
<script>

//关于我们轮播
$(function () {
    var usBoss = 0;
    var usLen = $("#usbanLb>a").length;

    var usTime = setInterval(usRunimg,3000);

    function usRunimg() {
        usBoss ++;
        if(usBoss > usLen-1){
            usBoss = 0;

        }
        $("#usbanLb>a").eq(usBoss).fadeIn(500).siblings().fadeOut(500);
        var $ulli = $(".usli").removeClass("hover-li");
        $ulli.eq(usBoss).addClass("hover-li");

    }
    // 鼠标移入事件
    $("#usBanner").hover(function () {
        clearInterval(usTime);
    },function () {
        usTime = setInterval(usRunimg,3000);
    });
    // 移入点点后显示相应图片
    $(".usli").mouseenter(function () {
        usBoss = $(this).attr(&#39;value&#39;);
        // 换图片
        $("#usbanLb>a").eq(usBoss).fadeIn(500).siblings().fadeOut(500);

        var $ulli = $(".usli").removeClass("hover-li");
        $ulli.eq(usBoss).addClass("hover-li");

    });

});

</script>



</body>
</html>

CSS 2 列レイアウト: 左側と右側を適応させる 3 つの方法右を修正_html /css_WEB-ITnose

以上がインジケーターの左右に配置されたカルーセルをHTMLで実装する方法（完全なコード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。