Question

我在一页上有7个不同的部分，但只有一页。喜欢：

<!-- Main Navigation -->

<nav class="main-nav">
  <ul>
  <li><a href="#home" class="active">Home</a></li>
    <li><a href="#about">Das Team</a></li>
      <li><a href="#Leistungen">Leistungen</a></li>
      <li><a href="#Rabatte">Rabatte/Kooperationen</a></li>
    <li><a href="#Rezensionen">Rezensionen</a></li>
      <li><a href="#Impressum">Impressum</a></li>
      <li><a href="#contact">Kontakt</a></li>
  </ul>
</nav>

目前，我的每个部分都有一个背景滑块，但是我希望每个部分都有一个具有不同图像的滑块。

滑块类似于：

<div id="maximage">
  <div>
    <img src="images/backgrounds/bg-img-1.jpg" alt="" />
    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
  </div>
  <div>
    <img src="images/backgrounds/bg-img-2.jpg" alt="" />
    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
  </div>
  <div>
    <img src="images/backgrounds/bg-img-3.jpg" alt="" />
    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
  </div>
  <div>
    <img src="images/backgrounds/bg-img-4.jpg" alt="" />
    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
  </div>
</div>

有人可以找到解决方案吗？

Answer 1

<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class='no-js' lang='de'>
    <!--<![endif]-->
    <head>
        <meta charset='utf-8' />
        <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
        <title>CBA</title>

        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="apple-touch-icon" href="images/favicon.png" />

        <link rel="stylesheet" href="css/maximage.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8" />

        <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

        <!--[if IE 6]>
            <style type="text/css" media="screen">
                .gradient {display:none;}
            </style>
        <![endif]-->
    </head>
    <body>

        <!-- Social Links -->
        <nav class="social-nav">
            <ul>
                <li><a href="https://www.facebook.com/conditionblackacademy/?ref=nf"><img src="images/icon-facebook.png" /></a></li>
                <li><a href="https://www.instagram.com/conditionblackacademy/"><img src="images/icon-twitter.png" /></a></li>
            </ul>
        </nav>

        <!-- Switch to full screen -->
        <button class="full-screen" onclick="$(document).toggleFullScreen()"></button>

        <!-- Site Logo -->
        <div id="logo"><img src="images/CBA Logo.png" alt="CBA" height="150" width="150"></div>


        <!-- Main Navigation -->
        <nav class="main-nav">
            <ul>
            <li><a href="#home" class="active">Home</a></li>
                <li><a href="#about">Das Team</a></li>
                <li><a href="#Leistungen">Leistungen</a></li>
                <li><a href="#Rabatte">Rabatte/Kooperationen</a></li>
                <li><a href="#Rezensionen">Rezensionen</a></li>
                <li><a href="#Impressum">Impressum</a></li>
                <li><a href="#contact">Kontakt</a></li>
            </ul>
        </nav>

        <!-- Slider Controls -->
        <a href="" id="arrow_left"><img src="images/arrow-left.png" alt="Slide Left" /></a>
        <a href="" id="arrow_right"><img src="images/arrow-right.png" alt="Slide Right" /></a>

        <!-- Home Page -->
        <section class="content show" id="home">
            <h3><p>Trainings, Kurse, Schulungen, Einweisungen in allen Bereichen der Themen Selbst- und Fremdschutz</p></h3>
            <p><a href="#about">Mehr Infos &#187;</a></p>
        </section>

        <!-- About Page -->
        <section class="content hide" id="about">
            <h4>Unser Team</h4>
            <h5>Das sind wir!</h5>
            <div id="avatar">
            <div class="avatar">
            <img src="images/uk.png" width="300" height="300" border="0" alt="uk">
            Uwe Krueger
            </div>
            <div class="avatar">
            <img src="images/ds.png" width="300" height="300" border="0" alt="ds">
            Diana Stark
            </div>
            <br style="clear: both;">

        </section>

        <!-- Contact Page -->
        <section class="content hide" id="contact">

            <h1>Kontakt</h1>
            <h5>Schreibt uns!</h5>
            <p>Email: <a href="#">info@condition-black-academy.com</a><br/><br /></p>
            <p>Hirtestraße 31<br />
                12555, Berlin</p>
        </section>

        <!-- Leistungs Page -->
        <section class="content hide" id="Leistungen">
            <h5>Leistungen</h5>

  <p>Lehrgang: „Pistol Basic“
  Lehrgang: „Pistol Advanced“
  Lehrgang: „Pistol Master“
  Lehrgang: „Pistol Basic Ladies Only“
    Lehrgang: „Verteidigungsschießen“
    Lehrgang: „Geschlossener Kurs“
    Lehrgang: „Werkstattkurs Glock“
    Sachkundige Prüfung nach DGUV 23
    Personal Shooting
    Fahrtraining
    Erste Hilfe</p>


        </section>

        <!-- Rabatte Page -->
        <section class="content hide" id="Rabatte">
            <h5>Rabatte/Kooperationen</h5>
            <p>Behördenmitarbeiter<br />
Wir haben uns entschieden, allen aktiven Polizist(innen)en, Bundespolizist(innen)en, Einsatzkräften vom Zoll und Soldat(innen)en der Bundeswehr einen dauerhaften Rabatt von 10% auf alle unsere Lehrgänge zu gewähren (bitte bei der Anmeldung mit angeben). Als Nachweis benötigen wir eine Kopie des gültigen Dienstausweises.
<br />
<br />
UNITER e.V.<br />
Allen aktiven Mitgliedern von UNITER e.V. (Link Webseite UNITER) bieten wir einen dauerhaften Rabatt von 20% auf unsere eigentlichen Lehrgangspreise an. Zusätzlich zu den offenen Kursen führen wir außerdem 1-2mal jährlich geschlossene UNITER-Lehrgänge durch.
</p>
        </section>

        <!-- Background Slides -->
        <section id="home">
        <div id="maximage">
            <div>
                <img src="images/backgrounds/bg-img-1.jpg" alt="" />
                <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
            </div>
            <div>
                <img src="images/backgrounds/bg-img-2.jpg" alt="" />
                <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
            </div>
            <div>
                <img src="images/backgrounds/bg-img-3.jpg" alt="" />
                <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
            </div>
            <div>
                <img src="images/backgrounds/bg-img-4.jpg" alt="" />
                <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
            </div>
        </div>
        </section>

        <section id="about">
        <div id="maximage" id="about">
            <div>
                <img src="images/backgrounds/team1.jpg" alt="" />
                <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
            </div>
            <div>
                <img src="images/backgrounds/team2.jpg" alt="" />
                <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
            </div>
            <div>
                <img src="images/backgrounds/team3.jpg" alt="" />
                <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
            </div>
            <div>
                <img src="images/backgrounds/team4.jpg" alt="" />
                <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
            </div>
        </div>
        </section>

        <script src="#" type="text/javascript" charset="utf-8"></script>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
        <script src="js/jquery.easing.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.cycle.all.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.fullscreen.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.ba-hashchange.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/main.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript" charset="utf-8">
            $(function(){
                $('#maximage').maximage({
                    cycleOptions: {
                        fx: 'fade',
                        speed: 1000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
                        timeout: 5000,
                        prev: '#arrow_left',
                        next: '#arrow_right',
                        pause: 0,
                        before: function(last,current){
                            if(!$.browser.msie){
                                // Start HTML5 video when you arrive
                                if($(current).find('video').length > 0) $(current).find('video')[0].play();
                            }
                        },
                        after: function(last,current){
                            if(!$.browser.msie){
                                // Pauses HTML5 video when you leave it
                                if($(last).find('video').length > 0) $(last).find('video')[0].pause();
                            }
                        }
                    },
                    onFirstImageLoaded: function(){
                        jQuery('#cycle-loader').hide();
                        jQuery('#maximage').fadeIn('fast');
                    }
                });

                // Helper function to Fill and Center the HTML5 Video
                jQuery('video,object').maximage('maxcover');

            });
        </script>
  </body>
</html>

Answer 2

将选择器更改为$（'＃home #maximage）并复制另一个maximage片段，并将选择器也更改为＃（'＃about #maximage）

编辑：

   $('#home #maximage').maximage({
                cycleOptions: {
                    fx: 'fade',
                    speed: 1000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
                    timeout: 5000,
                    prev: '#arrow_left',
                    next: '#arrow_right',
                    pause: 0,
                    before: function(last,current){
                        if(!$.browser.msie){
                            // Start HTML5 video when you arrive
                            if($(current).find('video').length > 0) $(current).find('video')[0].play();
                        }
                    },
                    after: function(last,current){
                        if(!$.browser.msie){
                            // Pauses HTML5 video when you leave it
                            if($(last).find('video').length > 0) $(last).find('video')[0].pause();
                        }
                    }
                },
                onFirstImageLoaded: function(){
                    jQuery('#cycle-loader').hide();
                    jQuery('#home #maximage').fadeIn('fast');
                }
            });

            $('#about #maximage').maximage({
                cycleOptions: {
                    fx: 'fade',
                    speed: 1000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
                    timeout: 5000,
                    prev: '#arrow_left',
                    next: '#arrow_right',
                    pause: 0,
                    before: function(last,current){
                        if(!$.browser.msie){
                            // Start HTML5 video when you arrive
                            if($(current).find('video').length > 0) $(current).find('video')[0].play();
                        }
                    },
                    after: function(last,current){
                        if(!$.browser.msie){
                            // Pauses HTML5 video when you leave it
                            if($(last).find('video').length > 0) $(last).find('video')[0].pause();
                        }
                    }
                },
                onFirstImageLoaded: function(){
                    jQuery('#cycle-loader').hide();
                    jQuery('#about #maximage').fadeIn('fast');
                }
            });

Answer 3

现在看起来像这样

  <!-- Background Slides -->
            <section id="home">
            <div id="maximage">
                <div>
                    <img src="images/backgrounds/bg-img-1.jpg" alt="" />
                    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
                </div>
                <div>
                    <img src="images/backgrounds/bg-img-2.jpg" alt="" />
                    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
                </div>
                <div>
                    <img src="images/backgrounds/bg-img-3.jpg" alt="" />
                    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
                </div>
                <div>
                    <img src="images/backgrounds/bg-img-4.jpg" alt="" />
                    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
                </div>
            </div>
            </section>
            <section id="about">
            <div id="maximage">
                <div>
                    <img src="images/backgrounds/team1.jpg" alt="" />
                    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
                </div>
                <div>
                    <img src="images/backgrounds/team2.jpg" alt="" />
                    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
                </div>
                <div>
                    <img src="images/backgrounds/team3.jpg" alt="" />
                    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
                </div>
                <div>
                    <img src="images/backgrounds/team4.jpg" alt="" />
                    <img class="gradient" src="images/backgrounds/gradient.png" alt="" />
                </div>
            </div>
            </section>

            <script src="#" type="text/javascript" charset="utf-8"></script>
            <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
            <script src="js/jquery.easing.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/jquery.cycle.all.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/jquery.fullscreen.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/jquery.ba-hashchange.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/main.js" type="text/javascript" charset="utf-8"></script>

            <script type="text/javascript" charset="utf-8">
                $(function(){
                    $('#home #maximage').maximage({
                    cycleOptions: {
                        fx: 'fade',
                        speed: 1000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
                        timeout: 5000,
                        prev: '#arrow_left',
                        next: '#arrow_right',
                        pause: 0,
                        before: function(last,current){
                            if(!$.browser.msie){
                                // Start HTML5 video when you arrive
                                if($(current).find('video').length > 0) $(current).find('video')[0].play();
                            }
                        },
                        after: function(last,current){
                            if(!$.browser.msie){
                                // Pauses HTML5 video when you leave it
                                if($(last).find('video').length > 0) $(last).find('video')[0].pause();
                            }
                        }
                    },
                    onFirstImageLoaded: function(){
                        jQuery('#cycle-loader').hide();
                        jQuery('#home #maximage').fadeIn('fast');
                    }
                });

                            // Helper function to Fill and Center the HTML5 Video
                            jQuery('video,object').maximage('maxcover');

                        });

            </script>

            <script type="text/javascript" charset="utf-8">
                $(function(){
                    $('#about #maximage').maximage({
                        cycleOptions: {
                            fx: 'fade',
                            speed: 1000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
                            timeout: 5000,
                            prev: '#arrow_left',
                            next: '#arrow_right',
                            pause: 0,
                            before: function(last,current){
                                if(!$.browser.msie){
                                    // Start HTML5 video when you arrive
                                    if($(current).find('video').length > 0) $(current).find('video')[0].play();
                                }
                            },
                            after: function(last,current){
                                if(!$.browser.msie){
                                    // Pauses HTML5 video when you leave it
                                    if($(last).find('video').length > 0) $(last).find('video')[0].pause();
                                }
                            }
                        },
                        onFirstImageLoaded: function(){
                            jQuery('#cycle-loader').hide();
                            jQuery('#about #maximage').fadeIn('fast');
                        }
                    });

                                // Helper function to Fill and Center the HTML5 Video
                                jQuery('video,object').maximage('maxcover');

                                });
            </script>
      </body>
    </html>

jQuery在不同部分上使用了不同的背景滑块

3 个答案: