您的位置：首页 > Web前端 > JavaScript

js轮播图-自动,手动,小圆点

2017-09-05 16:03 369 查看

轮播图时网站中经常需要的东西,那我们就立刻看看轮播图的做法,直接贴代码.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="utils.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
background: #ffffff;
}

#wrap {
width: 300px;
height: 150px;
margin: 100px auto;
position: relative;
overflow: hidden;
}

#list {
width: 1200px;
overflow: hidden;
position: absolute;
left: 0px;
top: 0;
transition: all 0.5s linear;
}

#list img {
float: left;
width: 300px;
height: 150px;
}

#tab {
position: relative;
display: none;
}

#tab a {
position: absolute;
top: 50%;
color: #ffffff;
line-height: 50px;
padding: 0 10px;
background: rgba(0, 0, 0, 0.6);
margin-top: 55px;
cursor: pointer;
}

#left-btn {
left: 0;
}

#right-btn {
right: 0;
}

#btn {
width: 300px;
position: absolute;
left: 0;
bottom: 0;
text-align: center;
}

.btn a {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}

.red {
background: red;
}

.white {
background: white;
}

</style>
<script>
window.onload = function () {
//这里封装了一个$函数,用来获取id,$相当于document.getElementById()
let tab = $("tab");
let leftBtn = $("left-btn");
let rightBtn = $("right-btn");
let list = $("list");
let btn = $("btn");
let tabs = tab.getElementsByTagName("a");
let btns = btn.getElementsByTagName("a");

let index = 0;//记录当前是第几张图片
let time = null;//记录定时器

//鼠标进入list时,tab显示
list.onmouseenter = function () {
tab.style.display = "block";
clear();//清除定时器
};

//鼠标离开list时,tab隐藏
list.onmouseleave = function () {
tab.style.display = "none";
start();//启动定时器
};

//遍历tabs,给每个tab加上进入离开事件,否则tab会跳动
for (let i = 0; i < tabs.length; i++) {
tabs[i].onmouseenter = function () {
tab.style.display = "block";
clear();//清除定时器
};
tabs[i].onmouseleave = function () {
tab.style.display = "none";
start();//启动定时器
};
}

//点击右按钮往右走
rightBtn.onclick = function () {
rightMove();
};

//点击左按钮往左走
leftBtn.onclick = function () {
leftMove();
};

//启动定时器,自动播放
start();

//点击小圆点,切换图片
for (let i = 0; i < btns.length; i++) {
btns[i].onmouseenter = function () {
clear();//鼠标移入小圆点时清除定时器
index = i;
list.style.left = -index * 300 + "px";
redBtns(index);
};
btns[i].onmouseleave = function () {
start();//鼠标离开小圆点时开启定时器
}
}

/**
* 启动定时器
* **/
function start() {
time = setInterval(function () {
rightMove();
}, 1000);
}

/**
* 清除定时器
* */
function clear() {
clearInterval(time);
}

/**
* 向左移动
**/

function leftMove() {
//当index为-1时,设为3回到最后一张图,否则会空白
index--;
if (index === -1) {
index = 3
}
list.style.left = -index * 300 + "px";

redBtns(index);//小圆点的滚动
}

/**
* 向右移动
*/
function rightMove() {
index++;
//当index为4是,设为0回到第一张图,否则会显示空白
if (index === 4) {
index = 0;
}
list.style.left = -index * 300 + "px";

redBtns(index);//小圆点的滚动

}

/**
* 小红点的滚动
* @param index
*/
function redBtns(index) {
//遍历循环所有的小圆点,看当前的index和i的值是否相等
for (let i = 0; i < btns.length; i++) {
if (i === index) {
btns[i].className = "red";
} else {
btns[i].className = "white";
}
}
}

}

</script>
</head>
<body>
<div id="wrap">

<div id="list">
<img src="img/img1.jpg" alt="">
<img src="img/img2.jpg" alt="">
<img src="img/img3.jpg" alt="">
<img src="img/img4.jpg" alt="">
</div>
<div id="tab">
<a id="left-btn" href="javascript:"><</a>
<a id="right-btn" href="javascript:">></a>
</div>
<div id="btn" class="btn">
<a class="red" href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 轮播图自动轮播图手动轮播图小圆点

相关文章推荐

新的分享

章节导航