简单的轮播图实现

骑猪看日落 2024-04-17 05:32 138阅读 0赞

## 轮播图介绍 ##

轮播图是在首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容，设计师们利用轮播图来最大化信息密度。轮播图有多种形状和大小，但本文中谈及的轮播图具有以下特性：  
它显示在首页的顶部，并占据不用滚动即可显示的页面上相当可观的面积。  
同一个地方会展示多页内容，虽然一次只展现一个页面；每页中包含图片以及小段文字。  
会有指示器表明，这个轮播图中不止一张图片。

轮播图也有着自己的优缺点：  
**优点**  
1.轮播图使得主屏上最重要的位置可以展示多页内容。  
2. 页面顶部显示了更多的信息，用户有更大的可能性看到它们。  
**缺点：**  
1. 用户经常性地忽视轮播图，连带着里面所有的内容（就算自动滚动也无济于事噢～）——用户压根就不会长时间注意页面的顶部。所以，你不能指望他们能看完轮播图里所有内容。  
2. 设计师常常认为轮播图是一组图片，但用户却只会在意他们看到的那一张图片。轮播图中的一组图片，也许能够精准地展现你的产品和服务，但如果用户只看到一组图片中的一张，他也许就会误解你的产品。

## 1.实现过程： ##

**1.1界面图**：  
![Alt][]  
**1.2功能介绍**  
界面顶部的四张小图片用来表示当前显示的图片是第几张，并且底部会有横线；  
向左的图标点击后可以跳转到上一张，如果当前为第一张，则跳转到最后一张；  
向右的图标点击后可以跳转到下一张，如果当前为最后一张，则跳转到第一张；  
中间的大图为正在显示的照片  
下面四个小圆点，点击后中间就会显示对应的照片，并且圆点会变成红色；  
不进行人为干涉下，每隔一段时间，自动跳转到下一张  
整个背景界面，在每一次跳转发生时，都会发生背景颜色的切换，同时在没有进行人为操作时，每隔一段时间背景色也会发生改变，且是随机变化，。

**1.3布局准备：**  
1、界面的顶部，放了四个p标签，里面包含了一张图片分别对应当前界面正在显示的照片，以及span标签，标注当前页面显示的照片是第几张。  
2、中间有一个bigbox的大盒子，里面包含了上一张功能的div(left)、显示图片的div(box)、下一张功能div(right)三个标签。  
3、界面底部有4个小圆点(a标签)，点击不同的圆点即可显示对应的图片。

**1.4代码讲解**

> 首先，先写好html布局，如下：  
> `<body>`  
> `<div id="p"> // 此处给第一个p标签设置class，并且在css中设置样式，用于对应标签在页面打开时的初始状态`  
> `<p class="bottom"><img src="img/1__03.jpg">当前在第一张</p>`  
> `<p><img src="img/1__11.jpg">当前在第二张</p>`  
> `<p><img src="img/1__07.jpg">当前在第三张</p>`  
> `<p><img src="img/1__09.jpg">当前在第四张</p>`  
> `</div>`  
> `<div id="bigbox">`  
> `<div id="left">`  
> `<img src="img/left.png" >`  
> `</div>`  
> `<div id="box">`  
> `<img src="img/1__03.jpg" id="img">`  
> `</div>`  
> `<div id="right">`  
> `<img src="img/right.png" >`  
> `</div>`  
> `</div>`  
> `<div id="link"> //此处设置同上方的p标签`  
> `<a href="img/1__03.jpg" class="red"></a>`  
> `<a href="img/1__11.jpg"></a>`  
> `<a href="img/1__07.jpg"></a>`  
> `<a href="img/1__09.jpg"></a>`  
> `</div>`  
> `<img src="img/71_4.jpg" id="mouseimg">`  
> `</body>` \`

> css布局样式，凭个人喜好，不在此处站式，仅展示需用到的：  
> `.bottom {border-bottom: 5px solid red;}`  
> `.red {background-color: red;}`

js代码

> 在js代码中，首先要考虑程序的几个功能的实现

> 1、点击小圆点的时候，要显示对应的照片，这时候就要让中间的img标签的src值为a对应a标签的href值，但是，a标签的链接地址会在网页中被解析，如果事先就以将地址放入一个数组中，然后去对应索引位的值赋值给img标签时，后面再用的时候，已写好的对应的a标签href就会和对应的img标签src不相等，所以我们要将a标签的地址直接存放入一个空数组中，这样数组中的地址就会和a标签经过解析后的地址相等

> 2、在实现上一张、下一张以及对应p标签下边框、a标签背景色变化的时候，我们首先都需要获取到当前显示的图片在数组中的索引，拿到p标签和a标签所在的集合中，否则，小圆点和上一张、下一张的点击事件就不会联系，即就算点击第三个小圆点显示第三张照片后，点击下一张，显示的会是第二张，而非第四章，在这里，我将这些功能事件放到一个函数中，调用执行

> 3、每当索引发生变化时，背景色就会随机变为一种颜色，这里我将背景色的随机事件也写在一个函数中，并且在每一个点击事件中调用

> 4、具体代码如下：

> 封装的函数：  
> `function my$(id){`  
> `return document.getElementById(id);`  
> `}`  
> `//获取随机色`  
> `function getRadomclass(){`  
> `var r=Math.round(Math.random()*255);`  
> `var g=Math.round(Math.random()*255);`  
> `var b=Math.round(Math.random()*255);`  
> `document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";//设置页面背景色`  
> `}`  
> `//获取当前img下标`  
> `function getNindex(){`  
> `for(var i=0;i<arr.length;i++){`  
> `//判断当前img的src和a标签href相等，即可取到对应a标签的下标，取出下标并return出去，在外部定义返回值为index，作为实参赋值给下面的函数Nindex()`  
> `if(img.src==arr[i]){`  
> `return i;`  
> `}`  
> `}`  
> `}`  
> `// 得到函数getNindex返回的下标值，遍历集合，修改对应p标签和a标签的class名`  
> `function Nindex(Nindex){`  
> `for(var i=0;i<links.length;i++){`  
> `//首先要清空p标签和a标签所有的class设置`  
> `links[i].setAttribute("class","");`  
> `simg[i].setAttribute("class","");`  
> `}`  
> `//给对应的p标签和a标签设置class属性，由于css中写好了样式，所以会直接体现出来`  
> `links[Nindex].setAttribute("class","red");`  
> `simg[Nindex].setAttribute("class","bottom");`  
> `}`

> 代码：  
> `var left=my$("left");`  
> `var right=my$("right");`  
> `var box=my$("box");`  
> `var oimg=my$("img");`  
> `var p=my$("p");`  
> `//获取a标签集合`  
> `var links=document.querySelectorAll("#link a");`  
> `//获取p标签集合`  
> `var simg=document.querySelectorAll("#p p");`  
> `// 定义空数组,用来存放a标签的href地址`  
> `var arr=[];`  
> `// 给body设置延时属性`  
> `document.body.style.transition='all 1s';`  
> `//将a标签的href地址放入数组`  
> `for(var i=0;i<links.length;i++){`  
> `arr[i]=links[i].href`  
> `}`  
> `//小圆点事件`  
> `//遍历a标签所在的links集合`  
> `for(var i=0;i<links.length;i++){`  
> `// 取到每一个小圆点(a标签)`  
> `var link=links[i];`  
> `//点击事件`  
> `link.onclick=function(){`  
> `// 将当前正在被点击的a的href赋值给img标签`  
> `//由于程序一加载完成，for循环就已经执行完成，i变为最大值，所以此处不能直接写links[i]，而是使用this`  
> `// this:事件源,指当前被点击的a`  
> `oimg.src=this.href;`  
> `//调用函数,改变背景色`  
> `getRadomclass();`  
> `//调用函数,获取当前显示的a标签的数组下标`  
> `getNindex();`  
> `var index=getNindex();`  
> `//调用函数,且实参为当前img标签下标值`  
> `Nindex(index);`  
> `//取消a标签的默认跳转行为`  
> `return false;`  
> `}`  
> `}`  
> `//上一张`  
> `left.onclick=function(){`  
> `//调用函数,改变背景色`  
> `getRadomclass();`  
> `//调用函数,获取当前显示的a标签的数组下标`  
> `getNindex();`  
> `var index=getNindex();`  
> `// 判断:`  
> `// 如果当前下标为0,则跳转到最后一张,即下标为arr.length-1`  
> `// 如果不为0,则跳转到上一张,即下标为index-1;`  
> `if(index==0){`  
> `img.src=arr[arr.length-1]`  
> `index=arr.length-1;`  
> `}else{`  
> `img.src=arr[index-1];`  
> `index--;`  
> `}`  
> `//调用函数,且实参为当前img标签下标值`  
> `Nindex(index);`  
> `}`  
> `//下一张`  
> `right.onclick=function(){`  
> `//调用函数,改变背景色`  
> `getRadomclass();`  
> `//调用函数,获取当前显示的a标签的数组下标`  
> `getNindex();`  
> `var index=getNindex();`  
> `// 判断:`  
> `// 如果当前下标为最后一张图片的下标,则跳转到第一张,即下标为index为0`  
> `// 如果不为最后一张,则跳转到下一张,即下标为index+1;`  
> `if(index==arr.length-1){`  
> `img.src=arr[0];`  
> `index=0;`  
> `}else{`  
> `img.src=arr[index+1];`  
> `index++;`  
> `}`  
> `//调用函数,且实参为当前img标签下标值`  
> `Nindex(index);`  
> `}`  
> `// function功能与下一张一致`  
> `// setInterval():每隔s毫秒执行一次,`  
> `// setTimeout():s毫秒后执行`  
> `// 格式:`  
> `// setInterval(function(){`  
> `// },)`  
> `// 定时器,每隔5秒切换一次`  
> `var timeid= setInterval(function(){`  
> `// clearInterval(timeid);`  
> `getRadomclass();`  
> `getNindex();`  
> `var index=getNindex();`  
> `if(index==arr.length-1){`  
> `img.src=arr[0];`  
> `index=0;`  
> `}else{`  
> `img.src=arr[index+1];`  
> `index++;`  
> `}`  
> `Nindex(index);`  
> `},3000)`

## 2.结束语 ##

本次使用js代码完成了一个实现轮播图的案例，还有其他更加简单的js实现方法，欢迎在下方评论。

[Alt]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/f1333a3627ad405ea633bf545befb99d.png