輪播圖兩種方法的實現與所有代碼

時間 2020-05-25

標籤兩種方法實現所有代碼简体版

原文原文鏈接

這是咱們上課讓作的做業，基本功能能夠實現，可是沒有相關的頁面美化，可是儘管代碼很少，我仍然調了好久bug，在這裏把我遇到的問題先跟大家說一下，避免大家犯一樣的錯誤：javascript

注意！！！php

（1）單詞必定要拼對，我常常由於拼錯單詞找好久bug都找不出來問題，本文的代碼中注意upload.html中 method="post" 、value、enctype="multipart/form-data"、onclick="createUploader()的拼寫；css

（2）注意showPic.php中這句代碼：$pic_01=$_GET["pic01"];中括號裏面是沒有「_」的。html

如下爲輪播圖的兩種方法：java

第一種方法：一頁代碼，後臺上傳圖片jquery

　　　圖片可自行下載，只要寫好對應路徑就能夠。bootstrap

showPic.phpapp

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>輪播圖</title>
 5     <meta charset="utf-8">
 6     <script type="text/javascript" src="./lib/jquery-2.0.3.min.js"></script> <!-- jquery-2.0.3.min.js文件地址 -->
 7     <script type="text/javascript" src="./lib/bootstrap-3.3.7/js/bootstrap.js"></script>
 8     <link rel="stylesheet" type="text/css" href="./lib/bootstrap-3.3.7/css/bootstrap.css">
 9     <style type="text/css">
10         body {
11             padding: 150px;
12         }
13     </style>
14 </head>
15 <body>
16     <div id="imgs" data-interval="2000" data-ride="carousel" class="carousel slide" style="width: 100%">
17         <div class="carousel-inner">
18             <div class="item active">
19                 <img src="img/3.jpg" style="width: 100%;height: 400px;"><!-- 設置上傳圖片地址，以及圖片位置和大小 -->
20             </div>
21             <div class="item">
22                 <img src="img/4.jpg" style="width: 100%;height: 400px;">
23             </div>
24             <div class="item">
25                 <img src="img/5.jpg" style="width: 100%;height: 400px;">
26             </div>
27             <div class="item">
28                 <img src="img/6.jpg" style="width: 100%;height: 400px;">
29             </div>
30             <ul class="carousel-indicators">  <!-- 圖片下面四個點的總體 -->
31                 <li data-target="#imgs" data-slide-to="0" class="active"></li> <!-- 對應第一個圖片，active表明先展現 -->
32                 <li data-target="#imgs" data-slide-to="1"></li>
33                 <li data-target="#imgs" data-slide-to="2"></li>
34                 <li data-target="#imgs" data-slide-to="3"></li>
35             </ul>
36         </div>
37         <a href="#imgs" data-slide="prev" class="carousel-control left" style="margin-top:0px;">  <!-- 圖片的左面部分，做用是展現上一張圖片 -->
38             <</a> <a href="#imgs" data-slide="next" class="carousel-control right" style="margin-top:0px;">> <!-- 圖片的右面部分，做用是展現下一張圖片 -->
39         </a>
40     </div>
41 </body>
42 </html>

這是須要的js文件：jquery-2.0.3.min.jside

這是須要的bootstrap文件：bootstrap-3.3.7.rar（此壓縮包中含有對應的css文件）函數

效果圖：

第二種方法：三頁代碼，前臺上傳文件

upload.html

 1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 2 <form action="upload.php" method="post" name="form" enctype="multipart/form-data">
 3     <!-- hidden元素在頁面上不顯示，主要用於提交表單的時候傳遞動態參數,也能夠被本頁的javascript函數獲取。 -->
 4     <input type="hidden" name="MAX_FILE_SIZE" value="1024000000000000000000000000">
 5     <div id="upload"></div>  <!-- 新建一個名爲upload的空間 -->
 6     <!-- onclick爲鼠標單擊時執行，createUploader()此函數爲新建上傳任務 -->
 7     <input type="button" value="添加附件" onclick="createUploader()"><br>
 8     <input type="submit" value="上傳"> <!-- submit爲button的特例 -->
 9 
10 </form>
11 <script>
12     function createUploader(){
13         var div = document.getElementById("upload");
14         var uploader = document.createElement("input");//建立這個節點
15         uploader.type = "file";
16         uploader.name = "myFile[]";
17         uploader.accept = "image/gif,image/jpeg,image/jpg";//設置上傳文件格式 
18         div.appendChild(uploader);  //將upload節點添加到div中
19         var br = document.createElement("br");
20         div.appendChild(br);
21     }
22 
23 </script>

upload.php

 1 <?php
 2 
 3 if (empty($_POST)) {
 4     exit("您提交的表單數據超過post_max_size的配置！<br/>");
 5 }
 6 
 7 $count = count($_FILES['myFile']['name']);
 8 
 9 //上傳成功的url圖片地址
10 $url="showPic.php?  ";
11 
12 for ($i = 0; $i < $count; $i++) {
13     $myFile = $_FILES['myFile'];
14     $error = $myFile["error"][$i];
15     switch ($error){
16         case 0:
17             $fileName = $myFile['name'][$i];
18             //echo"年上傳的文件有：".$fileName."<br/>";
19             $fileTmpe = $myFile['tmp_name'][$i];
20             $destination = "img/".iconv("UTF-8","gb2312",$fileName);//上傳的圖片存到後臺的路徑
21             move_uploaded_file($fileTmpe,$destination);
22             $url=$url."pic0".($i+1)."=".$destination."&";
23            
24           
25 
26             break;
27         case 1:
28             echo"上傳的某些文件超過了php.ini中upload_max_filesize選項限制的值！<br/>";
29             break;
30         case 2:
31             echo"上傳的某些文件超過了form表單MAX_FILE_SIZE選項限制的值！<br/>";
32             break;
33         case 3:
34             echo"某些文件只有部分被上傳！<br/>";
35             break;
36         case 4:
37         echo "沒有選擇上傳文件！<br/>";
38             break;
39     }
40     Header("Location:$url");//頁面跳轉到url路徑，用戶看不到
41 }
42    
43 ?>

showPic.php

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7     <title>輪播圖</title>
 8 
 9     <meta charset="utf-8">
10 
11     <script type="text/javascript" src="./lib/jquery-2.0.3.min.js"></script> <!-- jquery-2.0.3.min.js文件地址 -->
12 
13     <script type="text/javascript" src="./lib/bootstrap-3.3.7/js/bootstrap.js"></script>
14 
15     <link rel="stylesheet" type="text/css" href="./lib/bootstrap-3.3.7/css/bootstrap.css">
16 
17     <style type="text/css">
18         body {
19 
20             padding: 150px;
21 
22         }
23     </style>
24 
25 </head>
26 <?php
27     $pic_01=$_GET["pic01"];
28     $pic_02=$_GET["pic02"];
29     $pic_03=$_GET["pic03"];
30     $pic_04=$_GET["pic04"];
31 
32 ?>
33 
34 
35 <body>
36 
37     <div id="imgs" data-interval="2000" data-ride="carousel" class="carousel slide" style="width: 100%">
38 
39         <div class="carousel-inner">
40 
41             <div class="item active">
42 
43                 <img src="<?=$pic_01?>" style="width: 100%;height: 400px;"><!-- 設置上傳圖片地址，以及圖片位置和大小 -->
44 
45             </div>
46 
47             <div class="item">
48 
49                 <img src="<?=$pic_02?>" style="width: 100%;height: 400px;">
50 
51             </div>
52 
53             <div class="item">
54 
55                 <img src="<?=$pic_03?>" style="width: 100%;height: 400px;">
56 
57             </div>
58 
59             <div class="item">
60 
61                 <img src="<?=$pic_04?>" style="width: 100%;height: 400px;">
62 
63             </div>
64 
65             <ul class="carousel-indicators">  <!-- 圖片下面四個點的總體 -->
66 
67                 <li data-target="#imgs" data-slide-to="0" class="active"></li> <!-- 對應第一個圖片，active表明先展現 -->
68 
69                 <li data-target="#imgs" data-slide-to="1"></li>
70 
71                 <li data-target="#imgs" data-slide-to="2"></li>
72 
73                 <li data-target="#imgs" data-slide-to="3"></li>
74 
75             </ul>
76 
77         </div>
78 
79         <a href="#imgs" data-slide="prev" class="carousel-control left" style="margin-top:0px;">  <!-- 圖片的左面部分，做用是展現上一張圖片 -->
80             <</a> <a href="#imgs" data-slide="next" class="carousel-control right" style="margin-top:0px;">> <!-- 圖片的右面部分，做用是展現下一張圖片 -->
81         </a>
82 
83     </div>
84 
85 </body>
86 
87 </html>