前言
无论是在访问学校网站,或是一些电商的网站都会有轮播图的设计,如下B站的轮播图:
- 我们在不进行点击或是将鼠标放在上面的时候,就是以一个秒数进行轮播,一秒或是两秒,然后把鼠标放在图片上面,鼠标会变成一个小手,同时图片轮播停止在当前页上。
- 在图片轮播时候,下方会显示轮播到第几章图片会有一个比较明显显示:
- 在我们将鼠标放在特定的标签上这里就是一个小白点
●
点击时候就可以跳转到特定的页面,同时下方的标签也会有比较明显的不同,和自动轮询时候是一样的。
实现示例
我们来看我们的简约实现:
- 能够实现自动的轮播,每隔两秒自动更换图片和下方文字。
- 在变更图片和文字同时,下方标签颜色也会发生变化,由最开始的灰色变成白色。
- 将鼠标放在图片上,也可以实现箭头变成一个小手。
- 在点击(这里没有实现点击的功能,实现的是悬浮功能,悬浮在)特定的标签,就是下方的实心圆,就会立马变动到特定的图片。
实现设计思路
- 首先对于整个图片一定是要在一个
div
中,但是可能就会出现图片的大小超过div的范围,所以要实现精确的控制,控制图片的大小正好在div中。 - 如下图所示的半透明也是控制在一个div中,不过需要使用到
rgba
来控制透明度,实验半透明的暗色。
- 对于这个标签,一般也都是在div中,因为使用到div可以给一个
id
标签,使用id标签更加容易控制我们的具体信息。
当然对于这个●
我们是放在一个ul
中,无序标签,在li中填写上●
。
实现细节
- 来看body中的内容:
<div id="imgSlider">
// 表示最外面的边框。
<a href="#">
<img id="pic" src="" alt="">// 表示我们的图片
<div id="pictest"> // 表示图片下的文本信息。
</div>
<div id="dots">
<ul id="dotdiv"> // 表示实心圆标签。
</ul>
</div>
</a>
</div>
- 首先是图片和文字都是一一对应的,我们并不能够写死,因为这里只是一个小小的实现,我们使用到数组,将信息存在数组中,在那些大型的网站中的设计都是存储在数据库中,所以我们有以下定义:
我们将图片的地址和文本存在在两个数组中,然后类似于我们java中的数组,使用下标进行读取。这样就可以使用到获取div标签的id信息然后通过具体的标签内容进行访问。
var pictures=["http://maycope.cn/picture/turn-1.jpg","http://maycope.cn/picture/turn-2.jpeg","http://maycope.cn/picture/turn-3.jpeg","http://maycope.cn/picture/turn-4.jpg"];
var texts=["三潭映月","云色","祖国南疆","杭州旧宅"];
举个栗子 我们想要实现图片的轮播:
- 先获取到图片标签
img
的id,然后为其设置src
(表示图片地址):
var pic=document.getElementById("pic");
pic.src=pictures[currentpic];
//currentpic 表示下标值(需要进行取模运算,不能超过我们原有图片的值)
- 如何实现轮播,就是如何实现每隔2s就自动更换图片?就用到了
setInterval(函数名,时间(单位毫秒))
,我们定义一个函数实现图片的显示,同时第二个参数设置为2000表示为2s。
表示每隔2s调用showImage()
来进行图片的展示。
注意: 关于这里的setInterval
和clearInterval
可以参看函数使用链接
timer=setInterval(changeImage,2000);
function changeImage(){
currentpic++;
currentpic%=4;
showImage();
}
function showImage(){
pic.src=pictures[currentpic];
picText.innerText=texts[currentpic];
}
- 如何实现鼠标事件,当鼠标悬停时候图片轮播停止下来,就需要用到了
clearInterval
来将循环停止下来。函数使用链接
var imgslider=document.getElementById("imgSlider");// 表示获取到整个div的id。
var timer=null;
imgslider.onmouseover=function(){// 鼠标悬停在上面时候 停止时间片的轮转。
clearInterval(timer);
}
imgslider.onmouseout=function(){// 鼠标移开时候,重新开始计时。
timer=setInterval(changeImage,2000);
}
- 如何控制在当前的页面第几个标签亮起。因为我们的标签是放在ul里面使用到的事实无序
li
。
var dotss=document.getElementById("dotdiv");
for(var i=0;i<pictures.length;i++){
dotss.innerHTML+="<li>●</li>";// innerhtml 具体使用参看菜鸟教程。
}
var alldots=dotss.getElementsByTagName("li");
// 找出了所有的点
for(var i=0;i<alldots.length;i++){
alldots[i].index=i;
alldots[i].onmouseover=function(){// 获取到鼠标悬停展示对应下标对应的图片。
currentpic=this.index;
showImage();
}
}
function showImage(){
pic.src=pictures[currentpic];// 图片
picText.innerText=texts[currentpic];
for(var i=0;i<pictures.length;i++){// 标签 控制颜色等。
alldots[i].style.color="#ccc";
alldots[currentpic].style.color="#fff";
}
}
源代码
在实现的过程中没有什么特别大的难度,就是小细节注意到即可,下面贴出完整的css+JavaScript代码,供大家参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#imgSlider{
position: relative;
margin: 40px auto;
width: 600px;
height: 400px;
}
#imgSlider>a>img{
width: 600px;
height: 400px;
}
#pictest{
position: absolute;
height: 40px;
line-height: 40px;
width: 600px;
text-align: center;
top: 360px;
color: white;
background-color: rgba(0, 0,0, 0.5);
}
#dots{
position: absolute;
height: 30px;
line-height: 30px;
top: 330px;
width: 600px;
text-align: center;
}
#dots>ul{
display: inline-block;
list-style: none;
}
#dots>ul>li{
margin-left:6px ;
float: left;
color: #ccc;
}
#imgSlider:hover{
cursor: pointer;
/* 表示变成手 */
}
</style>
<script>
window.onload=function(){
// 这里图片使用到自己配置的七牛云图床。
var pictures=["http://maycope.cn/picture/turn-1.jpg","http://maycope.cn/picture/turn-2.jpeg",
"http://maycope.cn/picture/turn-3.jpeg","http://maycope.cn/picture/turn-4.jpg"];
var texts=["三潭映月","云色","祖国南疆","杭州旧宅"];
var currentpic=0;
var pic=document.getElementById("pic");
var picText=document.getElementById("pictest");
var dotss=document.getElementById("dotdiv");
var imgslider=document.getElementById("imgSlider");
var timer=null;
imgslider.onmouseover=function(){
clearInterval(timer);
}
imgslider.onmouseout=function(){
timer=setInterval(changeImage,2000);
}
for(var i=0;i<pictures.length;i++){
dotss.innerHTML+="<li>●</li>";
}
var alldots=dotss.getElementsByTagName("li");
// 找出了所有的点
for(var i=0;i<alldots.length;i++){
alldots[i].index=i;
alldots[i].onmouseover=function(){
currentpic=this.index;
showImage();
}
}
showImage();
timer=setInterval(changeImage,2000);
function changeImage(){
currentpic++;
currentpic%=4;
showImage();
}
function showImage(){
pic.src=pictures[currentpic];
picText.innerText=texts[currentpic];
for(var i=0;i<pictures.length;i++){
alldots[i].style.color="#ccc";
alldots[currentpic].style.color="#fff";
}
}
}
</script>
</head>
<body>
<div id="imgSlider">
<a href="#">
<img id="pic" src="" alt="">
<div id="pictest">
</div>
<div id="dots">
<ul id="dotdiv">
</ul>
</div>
</a>
</div>
</body>
</html>