如何使用js，css和html制作幻灯片

时间：2019-08-17 18:43:00

标签： javascript html css

我有一个基本的幻灯片显示，但是它不能正常工作。

我已经检查了许多网站（包括此处和YouTube）的解决方案，但没有任何效果

HTML 

<div id="siteBody" click="showMobileMenu &amp;&amp; toggleMobileNav()" class="container-fluid">
    <!-- ngIf: httpStatus === 404 -->
    <!-- ngIf: httpStatus === 200 -->
    <!-- uiView:  -->
    <div ui-view="" if="httpStatus === 200" class="main-content scope" style="">
        <div hide="!data" controller="HomeController" class="row scope">
            <section class="col-xs-12 videos">
                <div controller="VideoSliderController" mouseenter="stopSlider()" mouseleave="startSlider()" id="video-slider">
                    <div swipe-left="swipeLeft($event)" swipe-right="swipeRight($event)" class="row">
                        <ul class="dots no-ratio hidden-xxs">
                            <!-- ngRepeat: slide in slides -->
                            <li repeat="slide in slides" class="{active:isCurrentSlider($index)}" click="setCurrentSlider($index)" swipe-disable-mouse="swipe-disable-mouse" class="scope" style="">
                                <div class="dot"><!-- /c/ -->
                                </div>
                            </li>
                            <!-- end ngRepeat: slide in slides -->
                            <li repeat="slide in slides" class="{active:isCurrentSlider($index)}" click="setCurrentSlider($index)" swipe-disable-mouse="swipe-disable-mouse" class="scope" style="">
                                <div class="dot">
                                    <!-- /c/ -->
                                </div>
                            </li>
                            <!-- end ngRepeat: slide in slides -->
                            <li repeat="slide in slides" class="{active:isCurrentSlider($index)}" click="setCurrentSlider($index)" swipe-disable-mouse="swipe-disable-mouse" class="scope active" style="">
                                <div class="dot">
                                    <!-- /c/ -->
                                </div>
                            </li>
                            <!-- end ngRepeat: slide in slides -->
                            <li repeat="slide in slides" class="{active:isCurrentSlider($index)}" click="setCurrentSlider($index)" swipe-disable-mouse="swipe-disable-mouse" class="scope">
                                <div class="dot">
                                    <!-- /c/ -->
                                </div>
                            </li>
                            <!-- end ngRepeat: slide in slides -->
                        </ul>
                        <!-- ngRepeat: slide in slides -->
                        <!-- ngIf: $index === videoIndex -->
                        <!-- end ngRepeat: slide in slides -->
                        <!-- ngIf: $index === videoIndex -->
                        <div repeat="slide in slides" if="$index === videoIndex" animate="swipe-left" class="col-xs-12 video-slider-slide scope animate leave leave-active" data-animate="2" style="">
                            <!-- ngIf: slide.type === 'image' -->
                            <!-- ngIf: slide.type === 'video' -->
                            <span if="slide.type === 'video'" class="scope">
                                <a href="/videos/video/12124" ui-sref="video_info({videoId: slide.foreign_key})" data-gtm-category="Marquee" data-gtm-action="Click-through" data-gtm-label="/videos/video/12124">
                                    <div class="icon icon-play">
                                        <!-- /c/ -->
                                    </div>
                                    <!-- ngIf: slide.title -->
                                    <div style="background-image:url(img/46e3dd55b6cc4f1df004cabd85cbaac6fc8e1218.jpg)" class="bg bg-cover hidden-xxs">
                                        <!-- /c/ -->
                                    </div>
                                    <div style="background-image:url(img/46e3dd55b6cc4f1df004cabd85cbaac6fc8e1218.jpg)" class="bg bg-cover hidden-xs hidden-sm hidden-md hidden-lg hidden-xl">
                                        <!-- /c/ -->
                                    </div>
                                </a>
                                <div class="links hidden-xxs">
                                    <a href="http://www.galaxy-games.co.uk/GTAOnline" attr-href="{{slide.video.game.url_official}}" target="_blank" data-gtm-category="Marquee" data-gtm-action="CTA : Official Site" data-gtm-label="http://www.galaxy-games.co.uk/GTAOnline">Official Site</a><!-- ngIf: !slide.video.game.created -->
                                    <!-- ngIf: slide.video.game.created -->
                                    <a href="http://www.Galaxywarehouse.com/promo?promoID=95196800&amp;linkid=gta5" if="slide.video.game.created" attr-href="{{slide.video.game.purchases[0].href}}" target="_blank" data-gtm-category="Marquee" data-gtm-action="CTA : Buy Now" data-gtm-label="http://www.Galaxywarehouse.com/promo?promoID=95196800&amp;linkid=gta5" class="scope">Buy Now</a>
                                    <!-- end ngIf: slide.video.game.created -->
                                </div>
                            </span>
                            <!-- end ngIf: slide.type === 'video' -->
                        </div>
                        <!-- end ngIf: $index === videoIndex -->
                        <!-- end ngRepeat: slide in slides -->
                        <!-- ngIf: $index === videoIndex -->
                        <div repeat="slide in slides" if="$index === videoIndex" animate="swipe-left" class="col-xs-12 video-slider-slide scope animate enter enter-active" data-animate="2" style="">
                            <!-- ngIf: slide.type === 'image' -->
                            <!-- ngIf: slide.type === 'video' -->
                            <span if="slide.type === 'video'" class="scope">
                                <a href="/videos/video/12121" ui-sref="video_info({videoId: slide.foreign_key})" data-gtm-category="Marquee" data-gtm-action="Click-through" data-gtm-label="/videos/video/12121">
                                    <div class="icon icon-play">
                                        <!-- /c/ -->
                                    </div>
                                    <!-- ngIf: slide.title -->
                                    <div if="slide.title" class="title scope">
                                        <div class="wrapper binding">Red Dead Online</div>
                                    </div>
                                    <!-- end ngIf: slide.title -->
                                    <div style="background-image:url(img/46e3dd55b6cc4f1df004cabd85cbaac6fc8e1218.jpg)" class="bg bg-cover hidden-xxs">
                                        <!-- /c/ -->
                                    </div>
                                    <div style="background-image:url(img/46e3dd55b6cc4f1df004cabd85cbaac6fc8e1218.jpg)" class="bg bg-cover hidden-xs hidden-sm hidden-md hidden-lg hidden-xl">
                                        <!-- /c/ -->
                                    </div>
                                </a>
                                <div class="links hidden-xxs">
                                    <a href="https://www.galaxy-games.co.uk/reddeadonline" attr-href="{{slide.video.game.url_official}}" target="_blank" data-gtm-category="Marquee" data-gtm-action="CTA : Official Site" data-gtm-label="https://www.galaxy-games.co.uk/reddeadonline">Official Site</a>
                                    <!-- ngIf: !slide.video.game.created -->
                                    <!-- ngIf: slide.video.game.created -->
                                    <a href="http://www.Galaxywarehouse.com/promo?promoID=4834822900&amp;linkid=buyrdr2ps4&amp;utm_source=galaxy-games.co.uk&amp;utm_medium=referral&amp;utm_campaign=rdr2preorder&amp;utm_term=reddeadredemption2%20page&amp;utm_content=ps4" if="slide.video.game.created" attr-href="{{slide.video.game.purchases[0].href}}" target="_blank" data-gtm-category="Marquee" data-gtm-action="CTA : Buy Now" data-gtm-label="http://www.Galaxywarehouse.com/promo?promoID=4834822900&amp;linkid=buyrdr2ps4&amp;utm_source=galaxy-games.co.uk&amp;utm_medium=referral&amp;utm_campaign=rdr2preorder&amp;utm_term=reddeadredemption2%20page&amp;utm_content=ps4" class="scope">Buy Now</a>
                                    <!-- end ngIf: slide.video.game.created -->
                                </div>
                            </span>
                            <!-- end ngIf: slide.type === 'video' -->
                        </div>
                        <!-- end ngIf: $index === videoIndex -->
                        <!-- end ngRepeat: slide in slides -->
                        <!-- ngIf: $index === videoIndex -->
                        <!-- end ngRepeat: slide in slides -->
                    </div>
                    <div class="mobile-controls hidden-xs hidden-sm hidden-md hidden-lg hidden-xl">
                        <ul class="dots">
                            <!-- ngRepeat: slide in slides -->
                            <li repeat="slide in slides" class="{active:isCurrentSlider($index)}" click="setCurrentSlider($index)" swipe-disable-mouse="swipe-disable-mouse" class="scope" style="">
                                <div class="dot">
                                    <!-- /c/ -->
                                </div>
                            </li>
                            <!-- end ngRepeat: slide in slides -->
                            <li repeat="slide in slides" class="{active:isCurrentSlider($index)}" click="setCurrentSlider($index)" swipe-disable-mouse="swipe-disable-mouse" class="scope" style="">
                                <div class="dot">
                                    <!-- /c/ -->
                                </div>
                            </li>
                            <!-- end ngRepeat: slide in slides -->
                            <li repeat="slide in slides" class="{active:isCurrentSlider($index)}" click="setCurrentSlider($index)" swipe-disable-mouse="swipe-disable-mouse" class="scope active" style="">
                                <div class="dot">
                                    <!-- /c/ -->
                                </div>
                            </li>
                            <!-- end ngRepeat: slide in slides -->
                            <li repeat="slide in slides" class="{active:isCurrentSlider($index)}" click="setCurrentSlider($index)" swipe-disable-mouse="swipe-disable-mouse" class="scope">
                                <div class="dot">
                                    <!-- /c/ -->
                                </div>
                            </li>
                            <!-- end ngRepeat: slide in slides -->
                        </ul>
                        <span show="slides[videoIndex].type === 'video'" class="">
                            <div class="title">
                                <h4 class="binding">Testing</h4>
                            </div>
                            <a attr-href="{{slides[videoIndex].video.game.url_official}}" target="_blank" data-gtm-category="Marquee" data-gtm-action="CTA : Official Site" data-gtm-label="https://www.galaxy-games.co.uk/reddeadonline" href="https://www.galaxy-games.co.uk/reddeadonline">Official Site</a>
                            <!-- ngIf: !slides[videoIndex].video.game.created -->
                            <!-- ngIf: slides[videoIndex].video.game.created -->
                            <a href="http://www.Galaxywarehouse.com/promo?promoID=4834822900&amp;linkid=buyrdr2ps4&amp;utm_source=galaxy-games.co.uk&amp;utm_medium=referral&amp;utm_campaign=rdr2preorder&amp;utm_term=reddeadredemption2%20page&amp;utm_content=ps4" if="slides[videoIndex].video.game.created" attr-href="{{slides[videoIndex].video.game.purchases[0].href}}" target="_blank" data-gtm-category="Marquee" data-gtm-action="CTA : Buy Now" data-gtm-label="http://www.Galaxywarehouse.com/promo?promoID=4834822900&amp;linkid=buyrdr2ps4&amp;utm_source=galaxy-games.co.uk&amp;utm_medium=referral&amp;utm_campaign=rdr2preorder&amp;utm_term=reddeadredemption2%20page&amp;utm_content=ps4" class="scope">Buy Now</a>
                            <!-- end ngIf: slides[videoIndex].video.game.created -->
                        </span>
                    </div>
                </div>
            </section>

Javascript：

https://pastebin.com/wHdwzPe6

截屏： https://imgur.com/6pBQfqn

任何帮助表示感谢，并预先感谢

PS所有可见的文本和图像都仅用作占位符：）

0 个答案:

没有答案
相关问题
最新问题