开篇(唠嗑)
为什么说学过html都会?
因为我也刚学没多久，所运用的知识都是基础
两种方法创建出简单的轮播图
1.通过 javascript 去解决图片轮播
网页预览[github可能图片加载的有点慢]
由于博客无法加载动图，只能点进去查看
2.通过引用 bootstrap 去创建轮播图
网页预览[github可能图片加载的有点慢]
由于博客无法加载动图，只能点进去查看
轮播图Javascript方法
预览
由于博客无法加载动图，只能点进去查看
1.先创建 div 去容纳要放进去的内容
！id 随意，但不能重复！
================================================================================================
2.写css修饰
1)先将 ppt 的整体设置好 [ #ppt ]
position: absolute;
width: 100%;
height:600px;
将图片设为背景
background-image:url(./top/top1.png);
url 所对应的路径要看好，不然图片不会出来
./文件夹 为根目录的文件夹
../文件夹 为返回上一级的文件夹
将图片背景设置为不重复
background-repeat: no-repeat;
让图片背景宽度填满高度自动，且图片背景居中
background-size: 100% auto;
background-position: -50% 50%;
ppt 整体的代码为
#ppt{
position: absolute;
width: 100%;
height:600px;
/* 将图片设成不重复 */
background-repeat: no-repeat;
background-image:url(./top/top1.png);
/* 调整图片位置 */
background-size: 100% auto;
background-position: -50% 50%;
}
==============================================================================
2) 按钮的css[ .il 和 .ir ]
调整按钮大小
width:50px;
height:50px;
调整按钮位置
position: absolute;
top: 30%;
left: 3%;
设置按钮颜色
白色
background-color: aliceblue;
装饰下按钮
/* 只是为了让内容水平垂直居中 */
line-height: 48px;
text-align: center;
/* 设置圆角边框 */
border-radius: 5px;
/* 设置透明度 */
opacity: 0.3;
/* 设置动画 */
transition: opacity 500ms;
-webkit-transition: opacity 500ms;
/* 鼠标放在按钮上改变透明度 */
.ir:hover{
opacity: 0.8;
}
整体的按钮代码(左右按钮只是将 left 改成 right )
.il{
width:50px;
height:50px;
/* 调整按钮位置 */
position: absolute;
top: 30%;
left: 3%;/* 左右按钮不一样的地方*/
/* 按钮颜色 */
background-color: aliceblue;
/* 装饰按钮 */
line-height: 48px;
text-align: center;
border-radius: 5px;
opacity: 0.3;
transition: opacity 500ms;
-webkit-transition: opacity 500ms;
}
.il:hover{
opacity: 0.8;
}
.ir{
width:50px;
height:50px;
/* 调整按钮位置 */
position: absolute;
top: 30%;
right: 3%;/* 左右按钮不一样的地方*/
/* 按钮颜色 */
background-color: aliceblue;
/* 装饰按钮 */
line-height: 48px;
text-align: center;
border-radius: 5px;
opacity: 0.3;
transition: opacity 500ms;
-webkit-transition: 500ms;
}
.ir:hover{
opacity: 0.8;
}
================================================================================================
3)装点的 div[ #ppt_dot ]
设置位置，设置大小，得看你由多少张图片对应多少点设置
position: absolute;
width:200px;
height:30px;
将背景设置成透明
并将 div 设置到底端
background: none;
bottom:0px;
居中 div
left: 50%;
margin-left:-100px;
flex 布局使点在同一条线上
display: flex;
整体代码如下
#ppt_dot{
position: absolute;
width:200px;
height:30px;
background: none;
bottom:0px;
left: 50%;
margin-left:-100px;
display: flex;
}
================================================================================================
4)每个点的css[ #pd1 #pd2 #pd3 #pd4 ]
设置点大小
width:10px;
height: 10px;
设置点 没选中 时的颜色[这个颜色为黑灰色]
background:rgb(34, 34, 34);
设置点垂直位置[根据自己喜好调]
position: relative;
margin-top: 10px;
设置每个点的空隙[数值越大，空隙越大]
margin-left: 25px;
设置边框圆角，让 方点 变成 圆点 [想用方点调小或删掉即可]
如果自定了点的大小，想设置成圆点，圆角数值应为大小的一半
border-radius: 5px;
设置点的透明度[也可以不用加]
opacity: 0.8;
整体代码如下
#pd1,#pd2,#pd3,#pd4{
width:10px;
height: 10px;
background:rgb(34, 34, 34);
position: relative;
margin-top: 10px;
margin-left: 25px;
border-radius: 5px;
opacity: 0.8;
}
3.写JavaScript让图片动起来
写之前需要在开头定义个变量
这个变量可以设置为你图片序号的任意数字
但最好还是1
var img = 1;
1)改变图片
先创建个方法，让图片能变成其他的图片
先用个变量获取 id
var a = document.getElementById("ppt");
再用 变量.style.backgroundImage="url(图片路径)";
img变量用来储存序号，最好将图片名字重命名为可以由数字序号排列的名字
例如：img1.png img2.png img3.png ......
"url(./top/top"+img+".png)" 可能有变量难理解[高手除外哈]
假设四张图片，
其实这个路径就是从 top1.png => top4.png 中切换
我这个代码的第一个top是文件夹，第二个top是文件名+序号
a.style.backgroundImage="url(./top/top"+img+".png)";
整体代码
function change_img(){
var a = document.getElementById("ppt");
// "url(./top/top"+图片序号+".png)"
// 路径| 图片名 |图片后缀
// 改变 css 中的 background-Image
a.style.backgroundImage="url(./top/top"+img+".png)";
}
2)改变点的颜色
先用变量获取 id
var a = document.getElementById("pd1");
var b = document.getElementById("pd2");
var c = document.getElementById("pd3");
var d = document.getElementById("pd4");
通过 switch 来判断 img
记得在定义方法时引入变量
switch(img){
case 1:
break;
case 2:
break;
case 3:
break;
case 4:
break;
}
最后在每个对应的变量，去设置点的颜色
通过 变量.style.backgroundColor="颜色";
去改变 css 中的 background-Color 属性
a.style.backgroundColor="颜色";
b.style.backgroundColor="颜色";
c.style.backgroundColor="颜色";
d.style.backgroundColor="颜色";
最后代码拼接起来，整体如下
// 改变点的颜色
function change_dot(img){
var a = document.getElementById("pd1");
var b = document.getElementById("pd2");
var c = document.getElementById("pd3");
var d = document.getElementById("pd4");
// 通过 switch 去判断并改变 css 中的 background-Color
switch(img){
case 1:
a.style.backgroundColor="rgb(202, 202, 202)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 2:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(202, 202, 202)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 3:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(202, 202, 202)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 4:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(202, 202, 202)";
break;
}
}
3)向左向右切换图片
向左向右切换图片无非就是改变变量
向左:变量-1 向右:变量+1
img--;//向左
img++;//向右
但是不能一直减下去
通过 if 去判断，并将 变量img 设置成 开头或结尾
if(img<=0){//当图片已经是最前面一张时，再次点击会使 img = 4
img=4;
}
if(img>=5){//当图片已经是最后面一张时，再次点击会使 img = 1
img=1;
}
把改变图片的方法和改变点的方法放到最后
能使图片变换时不会切换到图片序号为 0 或 5 的图片
change_img();
change_dot(img);
然后我们需要将方法跟按钮绑定
用 onclick = "方法" 绑定
整体代码如下
js
// 向左切换图片
function ppt_left(){
img--;
if(img<=0){
img=4;
}
change_img();
change_dot(img);
}
// 向右切换图片
function ppt_right(){
img++;
if(img>=5){
img=1;
}
change_img();
change_dot(img);
}
html
4)开始轮播图片
为了让图片隔一段时间切
运用 setInterval 来定义一个计时器
格式为 变量 = setInterval (函数,延迟);
我想让他向左轮播
那就用我们刚刚定义的 向左改变图片 的方法去 改变图片:
ppt_time = setInterval("ppt_left()",3000);
我想让他向右轮播
那就用我们刚刚定义的 向右改变图片 的方法去 改变图片:
ppt_time = setInterval("ppt_right()",3000);
为了让网页一打开，图片就开始轮播，那就需要再 js 最顶部，
加入 window.onloadstart = 方法名 ;
最好时在 img变量 的下面
这样网页一打开，就会运行 开始轮播方法
window.onloadstart=ppt_start();//页面打开运行函数
整体代码
window.onloadstart=ppt_start();//页面打开运行函数
function ppt_start(){
change_dot(img);//引用改变点颜色函数
ppt_time = setInterval("ppt_right()",3000);
// 设置计时器轮播图片,越小越快，可以向左轮播，也可以向右轮播，该函数即可
// 计时器以毫秒计算，3000 即 3s=3000ms
}
5)停止轮播图片
通过 clearInterval(计时器变量) 来停止清除刚刚创建的计时器
clearInterval(ppt_time);
当我们想自己切换图片，但又不想在切换时自动轮播图片，
我们就可以在 div 中加入 onmouseover=”方法名“ 的属性，
使得鼠标放在 div 上时，运行 停止轮播 方法
当我们看完想看的图片后，将鼠标移走想让其继续轮播图片时
用 onmouseleave="方法名" 属性，让鼠标移离 div 时，继续轮播
整体代码
js
// 停止函数
function ppt_stop(){
clearInterval(ppt_time);
}
html
6)点击对应点切换对应图片
因为点击 点 然后切换图片
所以我们得先将 img 设置成对应点的 点
img = 1;
然后再改变图片
change_img();
change_dot(img);
然后再将方法绑定到 点 上
通过 onclick = "方法名";
整体代码
有多少点，就定义多少方法，按照图片序号，去改变方法名和变量
js
//每个点的被点击切换对应图片
function click_dot1(){
img=1;
change_img();
change_dot(img);
}
function click_dot2(){
img=2;
change_img();
change_dot(img);
}
function click_dot3(){
img=3;
change_img();
change_dot(img);
}
function click_dot4(){
img=4;
change_img();
change_dot(img);
}
html
javascript篇结束
通过 html+css+javascript 的运用，使得图片能够轮播
没啥技术含量，学得差不多，有逻辑，就能想的出来
整体代码
html
css
#ppt{
position: absolute;
width: 100%;
height:600px;
/* 将图片设成不重复 */
background-repeat: no-repeat;
background-image:url(./top/top1.png);
/* 调整图片位置 */
background-size: 100% auto;
background-position: -50% 50%;
}
.il{
width:50px;
height:50px;
/* 调整按钮位置 */
position: absolute;
top: 30%;
left: 3%;
/* 按钮颜色 */
background-color: aliceblue;
/* 装饰按钮 */
line-height: 48px;
text-align: center;
border-radius: 5px;
opacity: 0.3;
transition: opacity 500ms;
-webkit-transition: opacity 500ms;
}
.il:hover{
opacity: 0.8;
}
.ir{
width:50px;
height:50px;
/* 调整按钮位置 */
position: absolute;
top: 30%;
right: 3%;
/* 按钮颜色 */
background-color: aliceblue;
/* 装饰按钮 */
line-height: 48px;
text-align: center;
border-radius: 5px;
opacity: 0.3;
transition: opacity 500ms;
-webkit-transition: 500ms;
}
.ir:hover{
opacity: 0.8;
}
/* 装点的盒子 */
#ppt_dot{
position: absolute;
width:200px;
height:30px;
background: none;
bottom:0px;
left: 50%;
margin-left:-100px;
display: flex;
}
/* 调整每个点位置 */
#pd1,#pd2,#pd3,#pd4{
width:10px;
height: 10px;
background:rgb(34, 34, 34);
position: relative;
margin-top: 10px;
margin-left: 25px;
border-radius: 5px;
opacity: 0.8;
}
js
var img = 1;//起始图片序号
window.onloadstart=ppt_start();//页面打开运行函数
// 开始函数
function ppt_start(){
ppt_time = setInterval("ppt_right()",3000);
// 设置计时器轮播图片,越小越快，可以向左轮播，也可以向右轮播，该函数即可
// 计时器以毫秒计算，3000 即 3s=3000ms
change_dot(img);//引用改变点颜色函数
}
// 停止函数
function ppt_stop(){
clearInterval(ppt_time);
}
// 向左切换图片
function ppt_left(){
img--;
if(img<=0){
img=4;
}
change_img();
change_dot(img);
}
// 向右切换图片
function ppt_right(){
img++;
if(img>=5){
img=1;
}
change_img();
change_dot(img);
}
// 改变点的颜色
function change_dot(img){
var a = document.getElementById("pd1");
var b = document.getElementById("pd2");
var c = document.getElementById("pd3");
var d = document.getElementById("pd4");
// 通过 switch 去判断并改变 css 中的 background-Color
switch(img){
case 1:
a.style.backgroundColor="rgb(202, 202, 202)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 2:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(202, 202, 202)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 3:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(202, 202, 202)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 4:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(202, 202, 202)";
break;
}
}
//每个点的被点击切换对应图片
function click_dot1(){
img=1;
change_img();
change_dot(img);
}
function click_dot2(){
img=2;
change_img();
change_dot(img);
}
function click_dot3(){
img=3;
change_img();
change_dot(img);
}
function click_dot4(){
img=4;
change_img();
change_dot(img);
}
// 改变图片的函数
function change_img(){
var a = document.getElementById("ppt");
// "url(./top/top"+图片序号+".png)"
// 路径| 图片名 |图片后缀
// 改变 css 中的 background-Image
a.style.backgroundImage="url(./top/top"+img+".png)";
}
轮播图bootstrap方法
由于博客无法加载动图，只能点进去查看
准备说明
bootstrap 可以说是 html 的一个库，通过 bootstrap 我们可以通过给的模板，直接创建一个轮播图组件
我们得先将 bootstrap库 给下载下来
去下载> 官网 <去下载
打不开官网的话，点 这里
但是尽量在官网下，迫不得已再点 这里
我们制作的轮播图，仅仅只是用到了库里的 bootstrap.css 和 bootstrap.js 文件
我们通过创建 html 来引入这两货，就能简单的制作出轮播图
接下来，一步一步，教你创建轮播图，其实你可以跳转到最后，直接抄模板
1.引入 bootstrap 的两个文件
在 head 中，引入两个库
整体代码
2.创个 div 装轮播图
创建个 div 去装轮播图，通过 data-bs-ride 属性，来获取 bootstrap库 里的 carousel 创建轮播图组件
将 class 类设置为 carousel slide [除了 ppt 可以改成任意名字外，其他的别动]
ppt 为轮播图组件的 id
data-bs-interval 属性为设置轮播图播放速度，以 毫秒/ms 为单位
3.轮播图的设置
1)首先在 ppt 里，再创个 div ，将 class 类设置为 carousel-inner 。
2)在 class 为 carousel-inner 的类下，创建 div ，要多少图片，就创建多少 div 。
3)将每个 div 的 class 类为 carousel-item 。
4)有个特殊的 class 为 carousel-item active ，这个 div 则是第一个展示的 div
5)在每个 class 为 carousel-item 的 div 中，用 img 去引用图片，将 class 都设置为 d-block，并将宽度都设置为 100%
整体代码如下
4.设置下栏的小横杠[即为JavaScript版的点]
1)在 ppt 下，创建 div ，将 class 类设置为 carousel-indicators
2)在此类里，用 li 或者 button 创建出按钮 [这里我用 li ]
3)将每个按钮都增加上 data-bs-target 属性，属性设置为轮播图组件的 id，记得 #
4)将每个按钮都增加上 data-bs-slide-to 属性，属性设置为轮播图序号，以 0 开头
5)将第一个，或者你想让哪张图片先展示，就添加 class 为 active 的类
整体代码如下
这个 div 在 ppt 的 div 里
5.左右切换按钮
1)在 ppt 下，创建两个按钮
2)两个按钮的 class 分别为 carousel-control-prev 和 carousel-control-next
===================[看英文都知道 prev 之前，即往左 next 下一个，即向右]
属性 type 都为 button ， 属性 data-bs-target 都为 #ppt
4)绑定 bootstrap库 自定的 js
通过属性 data-bs-slide 分别设置为 prev 和 next
-------------------------------------------------向左----向右
5)在 button 里加入 span 属性，去引入图标
这是内置的左图标
这是内置的右图标
你也可以自定义图标，可以自己通过 css 去自定义按钮的大小[默认的按钮很大]
这些都是可以自定义样式的，包括下面的 小横杠[点]
整体代码如下
bootstrap篇结束
bootstrap库 ，可以让我们更快，更方便的创建一个轮播图组件，提升效率，而且还可以自定义
完整代码
我仅仅只是给按钮添加了点逐渐明显的动画
结束
JavaScript 方法我们可以通过自己的逻辑，去创建
bootstrap 方法我们可以通过给定的库，去快速的创建
两种方法都很简单，学过 html 的都会！