轮播图两种方法的实现与全部代码

    这是我们上课让做的作业，基本功能可以实现，但是没有相关的页面美化，但是尽管代码不多，我仍然调了很久bug，在这里把我遇到的问题先跟你们说一下，避免你们犯同样的错误：

注意！！！

（1）单词一定要拼对，我经常因为拼错单词找很久bug都找不出来问题，本文的代码中注意upload.html中 method="post" 、value、enctype="multipart/form-data"、onclick="createUploader()的拼写；

（2）注意showPic.php中 这句代码：$pic_01=$_GET["pic01"];中括号里面是没有 “_” 的。

以下为轮播图的两种方法：

 

第一种方法：一页代码，后台上传图片

　　　图片可自行下载，只要写好对应路径就可以。

showPic.php

 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.js

这是需要的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>

效果图：

 第二种方法也需要对应的js文件和bootstrap文件，可从第一种方法中下载。

 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2020-04-18写

欢迎评论点赞哦~~~

posted @ 2020-04-18 23:28  吃啥鸭  阅读(1245)  评论(0)  编辑  收藏  举报