Question

我试图用jQuery创建一个简单的自动滑动横幅。我也包括引导程序，我似乎无法在第一张幻灯片以外的任何内容上输入动画。我总体上对JS和jQuery非常陌生。任何帮助将不胜感激。

<!DOCTYPE html>
<?php
require_once '/core/init.php';
?>
<html>
  <head>
    <meta charset="utf-8">
    <title>Site</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css?v=<?=time();?>">  <!--v=<//?=time();?> forces css reload for. testing only-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body onload="slider()">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <a href="index.php" class="navbar-brand">Site</a>
        <ul class="nav navbar-nav">
        </ul>
      </div>
    </nav>
    <div id="slider" class="slider">
      <?php headDispFile() ?>
    </div>
      <div class="container-fluid">

      </div>
  </body>
</html>
 <!--php-->
<?php
  function headDispFile(){
    $imageDisplay = "";
    $images = scandir("img/header/");//scan directory
    $ignore = array(".","..");//ignore extra directory back and forward controls
    $i = '1';//set counting var $i to 1 as a string
    foreach ($images as $file) {//for each element in the images array
      if(!in_array($file, $ignore)){ //make sure ignore strings are not the name of the file
        $imageDisplay .= '<img id="'.$i.'" src="img/header/'.$file.'" class="hDisp"/>';//img html code to echo $i concatinated as string
        $i++;//incrament count
      }
    }
    echo $imageDisplay; //echo html
  }

 ?>
 <!--javascript-->
 <script type="text/javascript">
   function slider(){//declare function
     $(".slider #1").show("fade",500);//html with class="slider" and an id="1" fade in over 500ms
     $(".slider #1").delay(5500).hide("slide",{direction:'left'},500);//after 5500 ms delay hide the slide offscreen slide left 500ms
     var sc = $(".slider img").size();//get number of imgs in slideshow via class attribute tag
     var count = '2';//move to next slide

     setInterval(function(){//over a set interval
       $(".slider #"+count).show("slide",{direction:'right'},500);//slide in slide 2 from right
       $(".slider #"+count).delay(5500).hide("slide",{direction:'left'},500);//slide out slide 2 from left
       if (count == sc) {//if current slide is the last slide
         count = '1';//loop to slide 1
       }else{
         count++;//incriment slide
       }
     },6500);//declare interval for setInterval loop
   }
 </script>

jQuery + bootstrap滑块，只有第一张幻灯片正常动画

0 个答案: