自舉幻燈片動畫不起作用

我想通過動畫滾動div，但它不工作。可能有一點我犯了錯，但不知道是什麼。如果有人能解決這個問題，請幫助。我試圖按照此http://codepen.io/jmgiorgi_/pres/cLyCk 自舉幻燈片動畫不起作用

HTML代碼

<HTML> 
<HEAD> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <TITLE> 
     Demo 
    </TITLE> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"> 
    <link rel="stylesheet" href="css/custom_Bootstrap.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> 
    <script src="scripts/customFunctions.js"></script> 

</HEAD> 

<BODY> 

<div id="wrapper" data-spy="scroll" data-target="#spy" class=""> 


<div class="wrapper"> 
     <!--Sidebar View--> 
     <div class=" visible-sm visible-md visible-lg col-md-2 col-sm-4 sidebar1 "> 
      <!--<div class=" affix">--> 
       <div class="logo"> 

        <img src="http://lorempixel.com/output/people-q-g-64-64-1.jpg" class="img-responsive center-block" alt="Logo"> 

        <br> 
        <!-- <nav role='navigation'> --> 
        <!-- <div class="well sidebar1"> --> 
        <ul class="list "> 
         <!-- <ul class="list"> --> 
         <!-- <h5><strong>WHEREABOUTS</strong></h5> --> 
         <li><a href="#home">Home</a></li> 
         <li><a href="#education">Education</a></li> 
         <li><a href="#skills">Skills</a></li> 
         <li><a href="#achievements">Achievements</a></li> 
         <li><a href="#experience">Experience</a></li> 
         <li><a href="#extra">Extra Curriculum</a></li> 
         <li><a href="#hobbies">Hobbies</a></li> 
         <li><a href="#contact">Contact</a></li> 
        </ul> 
        <!-- </div> --> 
        <!-- </nav> --> 
       <!--</div>--> 
      </div> 
     </div> 
</div> 


     <!--Main content--> 

     <div class="col-md-8 col-md-offset-3 col-sm-8 col-sm-offset-4 col-xs-offset-2 col-xs-10 main-content"> 
      <!--Main content code to be written here --> 

      <section class="row" name ="home" id="home"> 
       <span> Demo</span> 
       <h2>DEmo App</h2><br> 
       <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

       <h2>About Company Page</h2><br> 
       <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

       <h2>About Company Page</h2><br> 
       <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 


       <h2>About Company Page</h2><br> 
       <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      </section> 

      <section class="row" name ="education" id="education"> 
       <span> Second Part</span> 

       <h2>karane</h2><br> 
       <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

       <h2>About Company Page</h2><br> 
       <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 


       <h2>About Company Page</h2><br> 
       <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 


       <h2>About Company Page</h2><br> 
       <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 



       <h2>About Company Page</h2><br> 
       <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 



       <h1>FEEDBACK APPRECIATED! :)</h1> 
       <h3>P.S.: For side navbar with dropdown menu, you may refer this snippet: http://bootsnipp.com/user/snippets/kWPoW</h3> 
      </section> 
     <!--</div>--> 
    </div> 
</div> 

</BODY> 

</HTML>

custom_Bootstrap.css文件

.sidebar1 { 
    background: #F17153; 
    /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(#F17153, #F58D63, #f1ab53); 
    /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(#F17153, #F58D63, #f1ab53); 
    /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(#F17153, #F58D63, #f1ab53); 
    /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(#F17153, #F58D63, #f1ab53); 
    /* Standard syntax */ 
    padding: 10px; 
    min-height: 100%; 

    height:100%; 

    background-color:#fff; 
    position:fixed!important; 
    z-index:1; 
    overflow:auto 
} 

.hidden{ 
    opacity:0; 
} 
.visible{ 
    opacity:1; 
} 

#wrapper { 

    transition: all 0.4s ease 0s; 
} 


.logo { 
    max-height: 130px; 
} 
.logo>img { 
    margin-top: 30px; 
    padding: 3px; 
    border: 3px solid white; 
    border-radius: 100%; 
} 
.list { 
    color: #fff; 
    list-style: none; 
    padding-left: 0px; 
} 
.list::first-line { 
    color: rgba(255, 255, 255, 0.5); 
} 
.list> li, h5 { 
    padding: 5px 0px 5px 40px; 
} 
.list>li:hover { 
    background-color: rgba(255, 255, 255, 0.2); 
    border-left: 5px solid white; 
    color: white; 
    font-weight: bolder; 
    padding-left: 35px; 
}.main-content{ 
    text-align:center; 
} 

@media (max-width: 1200px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
    .sidebar1.in{ 
     display:block !important; 
    } 
}

customFunctions.js文件

// Select all links with hashes 
$('a[href*="#"]') 
// Remove links that don't actually link to anything 
    .not('[href="#"]') 
    .not('[href="#0"]') 
    .click(function(event) { 
     // On-page links 
     if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname 
     ) { 
      // Figure out element to scroll to 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
      // Does a scroll target exist? 
      if (target.length) { 
       // Only prevent default if animation is actually gonna happen 
       event.preventDefault(); 
       $('html, body').animate({ 
        scrollTop: target.offset().top 
       }, 1000, function() { 
        // Callback after animation 
        // Must change focus! 
        var $target = $(target); 
        $target.focus(); 
        if ($target.is(":focus")) { // Checking if the target was focused 
         return false; 
        } else { 
         $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable 
         $target.focus(); // Set focus again 
        }; 
       }); 
      } 
     } 
    });

來源

2017-05-19 Creator

什麼錯？它正在工作 – tech2017

它正在工作，但我想當它按下選項時，它慢慢地去那個頁面不是馬上就像平滑 - 滑行 – Creator

您不使用文檔類型，是嗎？ – Rob

其實你的代碼已經偉大工程。如果你想讓它在你的customFunction.js

$('a[href*="#"]') 
// Remove links that don't actually link to anything 
    .not('[href="#"]') 
    .not('[href="#0"]') 
    .click(function(event) { 
     // On-page links 
     if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname 
     ) { 
      // Figure out element to scroll to 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
      // Does a scroll target exist? 
      if (target.length) { 
       // Only prevent default if animation is actually gonna happen 
       event.preventDefault(); 
       $('html, body').animate({ 
        scrollTop: target.offset().top 
       }, 3000, function() { 
        // Callback after animation 
        // Must change focus! 
        var $target = $(target); 
        $target.focus(); 
        if ($target.is(":focus")) { // Checking if the target was focused 
         return false; 
        } else { 
         $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable 
         $target.focus(); // Set focus again 
        }; 
       }); 
      } 
     } 
    });

滑動調整較慢我animate seconds改變它1000到3000。它看起來很不穩定，但對我而言，你目前的1000效果更好。

來源

2017-05-19 19:20:32 threeFatCat

這不會工作，錯誤與某些架構不速度。 – Creator

你是什麼意思，它不會工作？你能否提供關於這個問題的更多細節？上面的代碼工作正常，而且你在評論中說你希望它緩慢地滾動，這是它假設你的代碼變慢的原因。 – threeFatCat

我已經提到了上面的codepen.io鏈接。代碼滾動到該內容但不平滑滾動 – Creator

您嘗試將點擊事件添加到不在DOM噴射中的元素。你必須把它包一個$（文件）。就緒（內部）或移動腳本結束主體（< /身體> - 標籤之前）的

$(document).ready(function(){ 
 
    var $anchor = $('a[href*="#"]'); 
 
    console.log("anchor size:", $anchor.length); 
 
    $anchor 
 
     // Remove links that don't actually link to anything 
 
     .not('[href="#"]') 
 
     .not('[href="#0"]') 
 
     .click(function(event) { 
 
      // On-page links 
 
      if (
 
       location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
 
       && 
 
       location.hostname == this.hostname 
 
      ) { 
 
       // Figure out element to scroll to 
 
       var target = $(this.hash); 
 
       target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
 
       // Does a scroll target exist? 
 
       console.log("target size:", target.length); 
 
       if (target.length) { 
 
        // Only prevent default if animation is actually gonna happen 
 
        event.preventDefault(); 
 
        $('html, body').animate({ 
 
         scrollTop: target.offset().top 
 
        }, 1000, function() { 
 
         // Callback after animation 
 
         // Must change focus! 
 
         var $target = $(target); 
 
         $target.focus(); 
 
         if ($target.is(":focus")) { // Checking if the target was focused 
 
          return false; 
 
         } else { 
 
          $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable 
 
          $target.focus(); // Set focus again 
 
         }; 
 
        }); 
 
       } 
 
      } 
 
     }); 
 
});

來源

2017-05-19 19:24:29 Djaevel

不行不通 – Creator

我編輯了代碼。可以請使用它，並在萬一它不工作請共享控制檯輸出（點擊後） – Djaevel

它不能正常工作，我怎樣才能共享控制檯輸出，以及你使用它在PLUNKr – Creator

自舉幻燈片動畫不起作用

回答

相關問題