轮播图小白教程
2023-06-30 10:26
轮播图:
可以从图上，看出我们要实现的效果，首先罗列出来，方便我们一步步的进行处理。
此处我才用的是重叠图片，通过定时器，按一定时间进行对图片display属性进行更改。
实现的效果是：
1>图片自动轮播
2>图片序列按钮的点击更改图片事件
3>上、下一张的按钮事件
4>鼠标悬于图片上，不进行轮播。
当然，在这些效果之前，我们需要写完我们的html内容和css样式。
下列开始先写html。
<!--最大的div，是为了做为一个轮播图所需元素的容器-->
<div id="main">
<!--轮播图片区 在取名时，因为各有所长(分别取名slide1-5)，有共有特性(banner-slide)，所以，取多个类名-->
<div id="banner">
<!--图1-->
<a href="">
<div class="banner-slide slide1">1</div>
</a>
<!--图2-->
<a href="">
<div class="banner-slide slide2">2</div>
</a>
<!--图3-->
<a href="">
<div class="banner-slide slide3">3</div>
</a>
<!--图4-->
<a href="">
<div class="banner-slide slide4">4</div>
</a>
<!--图5-->
<a href="">
<div class="banner-slide slide5">5</div>
</a>
</div>
<!--
移动数字绑定图片
必然的是，和图片数量是对等的
-->
<div class="dots">
<ul id="dots">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<!--
上、下一张按钮
-->
<div id="left-right">
<div class="move" id="prev">‹</div>
<div class="move" id="next">›</div>
</div>
</div>
很好，框架已经有了,开始写css吧。
/*二话不说，上来就用通配符删除浏览器默认 值*/
* {
margin: 0;
padding: 0;
}
#main {
width: 1200px;
height: 600px;
position: relative;
margin: 50px auto;
/*为了在此的观看效果，我选择了这个数据*/
/*overflow: hidden;*//*因为设置了隐藏，所示的效果只有一张solid1*/
/*可在元素赠加和定位完成后进行影藏*/
}
/*
* 为所以图片设置同main一样宽高不大推荐
因为，如果图片没进行过处理，强制改变宽高，容易产生变形，
图片将变得难看。
* *//*为了使图片叠加所以我们使用absolute，在此之前
* 我们需要去它的父级添加一个relative。
* */
#main .banner-slide {
position: absolute;
width: 1200px;
height: 600px;
overflow: hidden;
/*防止图片过大，超出范围，影响视觉*/
}
/*
* 挨个设置轮播图的图片
* 为了方便在图片所在div加内容，标签
* 我们选择把轮播图内容以background形式出现。
*/
#main .slide1 {
background: red;
}
#main .slide2 {
background: yellow;
}
#main .slide3 {
background: blue;
}
#main .slide4 {
background: green;
}
#main .slide5 {
background: deepskyblue;
}
/*ul标签的移动*/
#main .dots #dots {
position: absolute;
margin-top: 560px;
/*由于我设置了li高为40，总高600，所以进行
560的移动*/
margin-left: 275px;
/*(1200-5*130)/2*/
}
#main .dots #dots li {
height: 40px;
width: 80px;
border-radius: 20%;
background: gray;
/*在此的样式根据个人喜好自己添加*/
/*由于上面的定位，所以*/
float: left;
/*为了是图标自左向右*/
margin-left: 50px;
list-style: none;
}
#main #left-right .move {
position: absolute;
margin-top: 260px;
height: 80px;
width: 40px;
font-size: 50px;
/*设置<>大小*/
padding-left: 10px;
}
/*左右分离*/
#main #left-right #next {
right: 0;
}
/*触碰上下张有效果*/
#main #left-right .move:hover {
background: rgba(0,0,0,0.4);
}
暂时先这样，看一下效果：
是不是已经有点雏形了？但是里面还少了一些东西，我们后面慢慢加，接下来开始我们的js部分
//因为之前使用了很多的id，所以我们为了方便得到
//所需的document.getElementById();,做一个封装函数（我是网上看来觉得挺好的)
function byid(id) {
return typeof id === "string" ? document.getElementById(id) : id;
// 相当于 return if(typeof(id)==='string'){
// document.getElementById(id);
// }else{
// id;
// }
}
//接下来开始轮播图脚本了。
//为了使得函数很多变量能互相使用，所以我们需要在wai
//定义好全局变量。
//len的设定 ： 由于长度上的计算很少，而且图片和数字移动数量相同，只需设置一个
// index的设定： 设置记数变量，因为数字从0开始计算。
var main = byid("main"),
pics = byid("banner").getElementsByTagName("div"),
dots = byid("dots").getElementsByTagName("li"),
prev = byid("prev"),
next = byid("next"),
len = pics.length,
index = 0,
timer = null; //timer是为了进行定时器的设置挺与开
//轮播图整体函数
function solide() {
//轮播定时器（是整个容器即main）：移入鼠标停止，和移出继续轮播
//先来个划入清除定时器
banner.onmouseover = function () {};
//再写一个划出继续启动定时器
banner.onmouseout = function () {};
}
solide(); //提前写上，开始方法，才有轮播效果
接着为了方便我们接下来的js操作，进行下css和html的补充。如图
来，我们看下补充的js代码（为了好区分）我使用了图片：
接着
最后！
下面送上完整代码（分块）
html
<!--最大的div，是为了做为一个轮播图所需元素的容器-->
<div id="main">
<!--轮播图片区 在取名时，因为各有所长(分别取名slide1-5)，有共有特性(banner-slide)，所以，取多个类名-->
<div id="banner">
<!--图1-->
<a href="">
<div class="banner-slide slide1 slide-active">1</div>
</a>
<!--图2-->
<a href="">
<div class="banner-slide slide2">2</div>
</a>
<!--图3-->
<a href="">
<div class="banner-slide slide3">3</div>
</a>
<!--图4-->
<a href="">
<div class="banner-slide slide4">4</div>
</a>
<!--图5-->
<a href="">
<div class="banner-slide slide5">5</div>
</a>
</div>
<!--
移动数字绑定图片
必然的是，和图片数量是对等的
-->
<div class="dots">
<ul id="dots">
<li class="li1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<!--
上、下一张按钮
-->
<div id="left-right">
<div class="move" id="prev">‹</div>
<div class="move" id="next">›</div>
</div>
</div>
css
/*二话不说，上来就用通配符删除浏览器默认 值*/
* {
margin: 0;
padding: 0;
}
#main {
width: 1200px;
height: 600px;
position: relative;
margin: 50px auto;
/*为了在此的观看效果，我选择了这个数据*/
overflow: hidden;
/*因为设置了隐藏，所示的效果只有一张solid1*/
/*可在元素赠加和定位完成后进行影藏*/
}
/*
* 为所以图片设置同main一样宽高不大推荐
因为，如果图片没进行过处理，强制改变宽高，容易产生变形，
图片将变得难看。
* *//*为了使图片叠加所以我们使用absolute，在此之前
* 我们需要去它的父级添加一个relative。
* */
#main .banner-slide {
position: absolute;
width: 1200px;
height: 600px;
overflow: hidden;
/*防止图片过大，超出范围，影响视觉*/
display: none;
}
#main .slide-active {
display: block;
}
/*
* 挨个设置轮播图的图片
* 为了方便在图片所在div加内容，标签
* 我们选择把轮播图内容以background形式出现。
*/
#main .slide1 {
background: red;
}
#main .slide2 {
background: yellow;
}
#main .slide3 {
background: blue;
}
#main .slide4 {
background: green;
}
#main .slide5 {
background: deepskyblue;
}
/*ul标签的移动*/
#main .dots #dots {
position: absolute;
margin-top: 560px;
/*由于我设置了li高为40，总高600，所以进行
560的移动*/
margin-left: 275px;
/*(1200-5*130)/2*/
}
#main .dots #dots li {
height: 40px;
width: 80px;
border-radius: 20%;
background: gray;
/*在此的样式根据个人喜好自己添加*/
/*由于上面的定位，所以*/
float: left;
/*为了是图标自左向右*/
margin-left: 50px;
list-style: none;
}
#main .dots #dots .li1 {
background: blue;
}
#main #left-right .move {
position: absolute;
margin-top: 260px;
height: 80px;
width: 40px;
font-size: 50px;
/*设置<>大小*/
padding-left: 10px;
}
/*左右分离*/
#main #left-right #next {
right: 0;
}
/*触碰上下张有效果*/
#main #left-right .move:hover {
background: rgba(0,0,0,0.4);
}
js
//因为之前使用了很多的id，所以我们为了方便得到
//所需的document.getElementById();,做一个封装函数（我是网上看来觉得挺好的)
function byid(id) {
return typeof id === "string" ? document.getElementById(id) : id;
// 相当于 return if(typeof(id)==='string'){
// document.getElementById(id);
// }else{
// id;
// }
}
//接下来开始轮播图脚本了。
//为了使得函数很多变量能互相使用，所以我们需要在wai
//定义好全局变量。
//len的设定 ： 由于长度上的计算很少，而且图片和数字移动数量相同，只需设置一个
// index的设定： 设置记数变量，因为数字从0开始计算。
var main = byid("main"),
pics = byid("banner").getElementsByTagName("div"),
dots = byid("dots").getElementsByTagName("li"),
prev = byid("prev"),
next = byid("next"),
len = pics.length,
index = 0,
timer = null; //timer是为了进行定时器的设置挺与开
//定时器的关注
function solide() {
//轮播定时器（是整个容器即main）：移入鼠标停止，和移出继续轮播
//先来个划入清除定时器
banner.onmouseover = function () {
if (timer) {
//即timer不为null，为真
clearInterval(timer); //清除setinterval，并且此时timer又为false，不过，随着循环（即师表
//移开banner，循环继续又变回 setinterval。
}
};
//再写一个划出继续启动定时器
banner.onmouseout = function () {
timer = setInterval(function () {
index++;
if (index >= len) {
index = 0;
} //注意因为index表示的是图片的标号，最大为4！！
//有了index就可以进行轮播了，可是我们没有执行图片变化的番薯
//设置一个，在全局作用域中。
changImg();
}, 3000); //setInterval为延时不停息的执行
};
banner.onmouseout(); //这样子直接运行function，可以不用在鼠标移出才进行，进入页面同时就开始轮播
//接下来我们开始数字下标绑定图片移动；
for (var j = 0; j < len; j++) {
//在开始前，我们需要知道，函数是可以独立作用域之外的。
dots[j].index = j; //为所以dots属性添加id，分别为0，1，2，3，4。
//不太推荐使用这样，毕竟id名字取数字开头不好，不太合规矩。
dots[j].onclick = function () {
index = this.index; //(引用id的是dots,及dots的id);
changImg();
};
}
//然后是上、下一张
prev.onclick = function () {
index--;
if (index < 0) {
index = len - 1;
}
changImg();
};
next.onclick = function () {
index++;
if (index >= len) {
index = 0;
}
changImg();
};
}
solide(); //提前写上，开始方法，才有轮播效果
//图片自动切换
function changImg() {
for (var i = 0; i < len; i++) {
pics[i].style.display = "none";
dots[i].className = "";
}
pics[index].style.display = "block";
dots[index].className = "li1";
}