轮播图
一、功能
功能一:鼠标移入图片按钮浮现,移出消失
功能二:点击按钮切换相应方向的图片,且相应的小圆点变色
功能三:点击小圆点变色,并切换相应图片
功能四:鼠标移入图片开启自动轮播,移出关闭
二、介绍
使用定时器制作简单的自动轮播图
点击轮播主要是使用onclick点击事件使轮播图在点击按钮时能向向左向右切换
1、HTML代码
注意:第一张和最后一张图片是特殊的,具体在js里我会另外说明。
另外,由于我的按钮样式是直接写的‘><’,所以后续的代码折叠功能可能会出现问题,但不影响代码的运行。
建议写的时候使用图标样式来写,我这里由于时间问题就不作修改了。
代码如下:
<div id="box">
<ul class="list">
<li><img src="img/4.jpg"></li>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/1.jpg"></li>
</ul>
<ul class="iconList">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="left"><</span>
<span class="right">></span>
</div>
2、CSS代码
国际惯例,先清除内置的css格式;
然后设置box,ul,li,img的属性
box为外层盒子,盒子里设置两个ul
第一个ul内包含6个li,,为li设置浮动属性,并设置ul和li的大小正好包含
每个li内都包含一个img,img大小设置和box一样大小
第二个ul内包含4个li
li使用border-radius设置为圆形
注1:两个ul都需要设置并设置绝对定位,且box设置相对定位
注2:box需要设置overflow:hidden;来隐藏不需要显示的图片
效果图如下:
css代码如下:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
img {
display: block;
}
.clearFix:after {
content: '';
display: block;
clear: both;
}
#box {
width: 450px;
height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
#box .list {
width: 2700px;
height: 300px;
position: absolute;
left: -450px;
}
#box .list li {
width: 450px;
height: 300px;
float: left;
}
#box .list li img {
width: 450px;
height: 300px;
}
#box .iconList {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50px);
/* overflow: hidden;和position: absolute;都能开启BFC,达到清除浮动的效果 */
}
#box .iconList li {
float: left;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #808080;
margin: 5px;
}
#box .iconList li.current {
background-color: red;
}
#box span {
position: absolute;
width: 30px;
height: 50px;
top: 50%;
transform: translateY(-50%);
color: white;
background: #808080;
font-size: 25px;
line-height: 50px;
text-align: center;
opacity: 0;
cursor: pointer;
/* transition: opacity 2s; */
/* transition只能监测到开始和结束 ,不能监测到中间的*/
}
#box .left {
left: 0px;
}
#box .right {
right: 0px;
}
</style>
3、js代码
简单的思路讲解:
轮播图的本质:
移动包含图片的ul,
使需要的图片显示在box中,而不需要的则隐藏起来
所以,
只需要为包含图片的ul设置left值,
即可使图片左右移动
另外:
由于整个轮播图中,点击按钮移动图片、点击小圆点移动图片、和自动轮播图片的本质都只是移动轮播图;
所以,直接写一个图片移动的函数,并在点击事件和自动轮播中调用即可。
其他的由于在不看代码时讲解不清
所以我在代码中写了详细的注释,直接查看js代码即可
js代码如下:
<script type="text/javascript">
window.onload = function() {
var box = document.querySelector('#box');
var ulNode = document.querySelector('#box .list');
var icoLiNode = document.querySelectorAll('#box .iconList li');
var spanNodes = document.querySelectorAll('span');
var time = 450; //每次点击移动的总时间
var eachTime = 10; //每步移动的时间
var isMove = false;
box.onmouseover = function() {
spanNodes[0].style.opacity = '1';
spanNodes[1].style.opacity = '1';
//鼠标移入自动轮播
timer2 = setInterval(function() {
move(false);
}, 3000);
}
box.onmouseout = function() {
spanNodes[0].style.opacity = '0';
spanNodes[1].style.opacity = '0';
//鼠标移出关闭自动轮播
clearInterval(timer2);
}
// 轮播图移动函数
function move(flag) {
//防止函数同时被多个事件调用。
// 设置一个标志位,根据标志位的状态来判断是否有人正在调用该函数,
// 若标志位状态为true,则代表该函数正在被调用,无法再调用。以保证同时只有一个事件调用该函数
if (isMove) {
return;
}
isMove = true;
// 设置轮播图在每次点击中要移动的距离
var ulEachMove = 0;
// 判断调用该函数的事件,并设置不同的移动值
if (flag) {
ulEachMove = box.clientWidth;
} else {
ulEachMove = -box.clientWidth;
}
var ulLastLeft = ulNode.offsetLeft + ulEachMove;
var eachUlMove = ulEachMove * eachTime / time;
// 设置循环定时器使轮播图平滑的移动
timer = setInterval(function() {
var a = ulNode.offsetLeft + eachUlMove;
if (flag) {
if (a >= ulLastLeft) {
clearInterval(timer);
isMove = false;
}
} else {
if (a <= ulLastLeft) {
clearInterval(timer);
isMove = false;
}
}
//这里就是为什么只有4个图片却设置了六个img的原因了
//使轮播图可以无缝切换
if (a <= -2250) {
//即:图片轮播到最后一个时,还要往后轮播,则切换回第一个图片
a = -450;
} else if (a >= 0) {
//即:图片轮播到第一个时,还要往前轮播,则切换回最后一个图片
a = -1800;
}
ulNode.style.left = a + 'px';
}, eachTime);
//设置小圆点随图片的轮播变色
for (var i = 0; i < icoLiNode.length; i++) {
icoLiNode[i].className = '';
}
var index = -ulLastLeft / box.clientWidth - 1;
if (index > 3) {
index = 0;
} else if (index < 0) {
index = 3;
}
icoLiNode[index].className = 'current';
}
spanNodes[0].onclick = function() {
move(true);
console.log(1);
}
spanNodes[1].onclick = function() {
move(false);
}
//点击小圆点改变图片
for (var i = 0; i < icoLiNode.length; i++) {
// 为icoLiNode[i]添加属性,使得在内循环中也能获取i的值
icoLiNode[i].index = i;
icoLiNode[i].onclick = function() {
//使用排它实现点击变色
for (var j = 0; j < icoLiNode.length; j++) {
icoLiNode[j].className = '';
}
this.className = 'current';
// 获取小圆点的下标,并加1
var a = this.index + 1;
// 设置ul向左平移的距离
ulNode.style.left = -a * box.clientWidth + 'px';
}
}
}
</script>
[完整项目度盘地址:](https://pan.baidu.com/s/1mvCBshdQnwwt2sr4FbLSRQ)
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
display: block;
}
input {
outline: none;
}
.clearFix:after {
content: '';
display: block;
clear: both;
}
#box {
width: 450px;
height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
#box .list {
width: 2700px;
height: 300px;
position: absolute;
left: -450px;
}
#box .list li {
width: 450px;
height: 300px;
float: left;
}
#box .list li img {
width: 450px;
height: 300px;
}
#box .iconList {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50px);
/* overflow: hidden;和position: absolute;都能开启BFC,达到清除浮动的效果 */
}
#box .iconList li {
float: left;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #808080;
margin: 5px;
}
#box .iconList li.current {
background-color: red;
}
#box span {
position: absolute;
width: 30px;
height: 50px;
top: 50%;
transform: translateY(-50%);
color: white;
background: #808080;
font-size: 25px;
line-height: 50px;
text-align: center;
opacity: 0;
cursor: pointer;
/* transition: opacity 2s; */
/* transition只能监测到开始和结束 ,不能监测到中间的*/
}
#box .left {
left: 0px;
}
#box .right {
right: 0px;
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li><img src="img/4.jpg"></li>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/1.jpg"></li>
</ul>
<ul class="iconList">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="left">
<</span> <span class="right">>
</span>
</div>
<script type="text/javascript">
window.onload = function() {
var box = document.querySelector('#box');
var ulNode = document.querySelector('#box .list');
var icoLiNode = document.querySelectorAll('#box .iconList li');
var spanNodes = document.querySelectorAll('span');
var time = 450; //每次点击移动的总时间
var eachTime = 10; //每步移动的时间
var isMove = false;
box.onmouseover = function() {
spanNodes[0].style.opacity = '1';
spanNodes[1].style.opacity = '1';
//鼠标移入自动轮播
timer2 = setInterval(function() {
move(false);
}, 3000);
}
box.onmouseout = function() {
spanNodes[0].style.opacity = '0';
spanNodes[1].style.opacity = '0';
//鼠标移出关闭自动轮播
clearInterval(timer2);
}
// 轮播图移动函数
function move(flag){
//防止函数同时被多个事件调用。
// 设置一个标志位,根据标志位的状态来判断是否有人正在调用该函数,
// 若标志位状态为true,则代表该函数正在被调用,无法再调用。以保证同时只有一个事件调用该函数
if (isMove) {
return;
}
isMove = true;
// 设置轮播图在每次点击中要移动的距离
var ulEachMove =0;
// 判断调用该函数的事件,并设置不同的移动值
if(flag){
ulEachMove = box.clientWidth;
}else{
ulEachMove = -box.clientWidth;
}
var ulLastLeft = ulNode.offsetLeft + ulEachMove;
var eachUlMove = ulEachMove * eachTime / time;
// 设置循环定时器使轮播图平滑的移动
timer = setInterval(function() {
var a = ulNode.offsetLeft + eachUlMove;
console.log(a);
if(flag){
if (a >= ulLastLeft) {
clearInterval(timer);
isMove = false;
}
}else{
if (a <= ulLastLeft) {
clearInterval(timer);
isMove = false;
}
}
if (a <= -2250) {
a = -450;
} else if (a >= 0) {
a = -1800;
}
ulNode.style.left = a + 'px';
}, eachTime);
//设置小圆点随图片的轮播变色
for (var i = 0; i < icoLiNode.length; i++) {
icoLiNode[i].className = '';
}
var index = -ulLastLeft / box.clientWidth - 1;
if (index > 3) {
index = 0;
} else if (index < 0) {
index = 3;
}
icoLiNode[index].className = 'current';
}
spanNodes[0].onclick = function() {
move(true);
console.log(1);
}
spanNodes[1].onclick = function() {
move(false);
console.log(2);
}
//点击小圆点改变图片
for(var i = 0; i<icoLiNode.length;i++){
// 为icoLiNode[i]添加属性,使得在内循环中也能获取i的值
icoLiNode[i].index = i;
icoLiNode[i].onclick=function(){
//使用排它实现点击变色
for (var j = 0; j < icoLiNode.length; j++) {
icoLiNode[j].className = '';
}
this.className = 'current';
// 获取小圆点的下标,并加1
var a = this.index +1;
// 设置ul向左平移的距离
ulNode.style.left = -a*box.clientWidth +'px';
}
}
}
</script>
</body>
</html>