LibraryMainPage.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>OnlineLibrary</title>
  <link rel="stylesheet" type="text/css" href="library.css">
  
  <style>
    .login1 input[type="text"],input[type="password"] {
      font-size: 1em;
      font-weight: 100;
      margin: 3em 0 0;
      width: 93%;
      display: block;
      border: none;
      padding: 1em;
    }
    
  </style>
</head>

<body>

<!-- 顶部导航 -->
<div class="headerpage"></div>
<!--顶部导航 over-->

<div id="main">
  
  <div id="sort">
    <ul id="book1">
      <li class="Category"><a href="post.php">Category</a></li>
      <li class="Science fiction"><a href="post.php">Science fiction</a></li>
      <li class="War"><a href="post.php">War</a></li>
      <li class="Phantasy"><a href="post.php">Phantasy</a></li>
      <li class="School"><a href="post.php">School</a></li>
    </ul>
  </div>
  <!--sort-->
  <div id="search">
    <form id="form">
      <input class="in1" name="search" type="text" placeholder="Types in the book name">
      <button onclick="f2()">Search</button>
      <!--input class="ou1" type="submit" name="send"  value="search"-->
    </form>
  </div>  <!--search-->
  
  <div id="tu">
    <div class="c-banner">
      <div class="banner">
        <ul>
          <li><img src="LightNovalLibrary/862.jpg" ></li>
          <li><img src="LightNovalLibrary/wolf1.jpg" ></li>
          <li><img src="LightNovalLibrary/aword.png" ></li>
        </ul>
      </div>
      <!--banner-->
      <div class="nexImg"><img src="LightNovalLibrary/nextImg.png" /></div>
      <div class="preImg"><img src="LightNovalLibrary/preImg.png" /></div>
      <div class="jumpBtn">
        <ul>
          <li jumpImg="0"></li>
          <li jumpImg="1"></li>
          <li jumpImg="2"></li>
        </ul>
      </div>
      
    </div>
  
  </div>
  
  

</div>
<div id="goal">
  <h2>Our Purpose</h2>
  <div class="line green"><span> </span></div>
  <h4>We aim to provide different languages' version of the light Novels <br>
  and to provide an platform for all the Novel fans in the world to communicate</h4>
  <div class="services_grids">
    <div class="grid_1_of_4 services_1_of_4"> <img src="LightNovalLibrary/free.jpg" width="200" height="200" id="t1" alt="services" />
      <h3>Free to Downlad</h3>
      <p>We aim to provide completely free Download services </p>
    </div>
    <div class="grid_1_of_4 services_1_of_4"> <img src="LightNovalLibrary/update.png" width="200" height="200" id="t2" alt="update" />
      <h3>Update on Daily</h3>
      <p>We promise to maintain the service on daily</p>
    </div>
    <div class="grid_1_of_4 services_1_of_4"> <img src="LightNovalLibrary/chat.png" width="200" height="200" id="t3" alt="chat" />
      <h3>Community</h3>
      <p>We have a large community for people who like light novel to be able to chat about it</p>
    </div>
  </div>
</div><!--goal-->

<form action="Login.php"  method='post' >
<div id="login">
  <div id="login_page">
    <div class="login1">
      <form action="#" method="post">
        <input type="text"  class="class" name = "userName" id = "userName" placeholder="userName" required>
        <input type="password"  class="password" name = "password" id = "password" placeholder="Password" required>
        <div class="wthree-text">
          <ul>
            <li>
              <label class="anim">
                <input type="checkbox" class="checkbox" required>
                <span>Automatic Login</span></label>
            </li>
            <li><a href="#">Forget Password</a></li>
          </ul>
        </div>
        <div class="clear"></div>
        <input type="submit" value="Login" onclick="check()">
      </form>
      <p><a href="Register.html">Creat Account?</a></p>
    </div>

  </div><!--login_page-->
  </div>
</form>
  
  <div id="right"> <span>Project 3140 Dahong He's first tryout</span> </div><!--rightt-->

</div><!--login-->

<script src="jquery-3.6.0.js"></script>
<script>
  $(function(){
    /*公共部分
	 * 导航栏
	 * footer CopyRight
	 */
    $(".headerpage").load("Header.php");
  });


  $(function(){
    var time=null;
    //image position
    var nexImg = 0;
    var imgLength = $(".c-banner .banner ul li").length;

    $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
    
    $(document).ready(function(){
      // dynamicData();
      //timer is 5 second to change picture
      time =setInterval(intervalImg,5000);
    });

//click on previous picture
    $(".preImg").click(function(){
      //clear the timer
      clearInterval(time);
      var nowImg = nexImg;
      nexImg = nexImg-1;
      console.log(nexImg);
      if(nexImg<0){
        nexImg=imgLength-1;
      }
      $(".c-banner .jumpBtn ul li").css("background-color","white");
      $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
    
      //positioning the image
      $(".c-banner .banner ul img").eq(nowImg).css("position","absolute");
      $(".c-banner .banner ul img").eq(nexImg).css("position","relative");
      
      $(".c-banner .banner ul li").eq(nexImg).css("display","block");
      $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
      $(".c-banner .banner ul li").eq(nowImg).stop().animate({"opacity":0},1000,function(){
        $(".c-banner ul li").eq(nowImg).css("display","none");
      });
    
      //set time interval
      time =setInterval(intervalImg,5000);
    })
    
    $(".nexImg").click(function(){
      clearInterval(time);
      intervalImg();
      time =setInterval(intervalImg,5000);
    })
    
    function intervalImg(){
      if(nexImg<imgLength-1){
        nexImg++;
      }else{
        nexImg=0;
      }
      
      $(".c-banner .banner ul img").eq(nexImg-1).css("position","absolute");
      $(".c-banner .banner ul img").eq(nexImg).css("position","relative");
    
      $(".c-banner .banner ul li").eq(nexImg).css("display","block");
      $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
      $(".c-banner .banner ul li").eq(nexImg-1).stop().animate({"opacity":0},1000,function(){
        $(".c-banner .banner ul li").eq(nexImg-1).css("display","none");
      });
      $(".c-banner .jumpBtn ul li").css("background-color","white");
      $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
    }
    
    $(".c-banner .jumpBtn ul li").each(function(){
      
      $(this).click(function(){
        clearInterval(time);
        $(".c-banner .jumpBtn ul li").css("background-color","white");
        jumpImg = $(this).attr("jumpImg");
        if(jumpImg!=nexImg){
          var after =$(".c-banner .banner ul li").eq(jumpImg);
          var befor =$(".c-banner .banner ul li").eq(nexImg);
          
          $(".c-banner .banner ul img").eq(nexImg).css("position","absolute");
          $(".c-banner .banner ul img").eq(jumpImg).css("position","relative");
        
          after.css("display","block");
          after.stop().animate({"opacity":1},1000);
          befor.stop().animate({"opacity":0},1000,function(){
            befor.css("display","none");
          });
          nexImg=jumpImg;
        }
        $(this).css("background-color","black");
        time =setInterval(intervalImg,5000);
      });
    });
  });
  
 

</script>

</body>
</html>