- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/index2.js"></script>
</head>
<body>
<div id="slide1" class="container">
<ul>
<li><a href="http://www.1000phone.com"><img src="img/1.jpg" alt="文字1" /></a></li>
<li><a href="http://www.1000phone.com"><img src="img/2.jpg" alt="文字2" /></a></li>
<li><a href="http://www.1000phone.com"><img src="img/3.jpg" alt="文字3" /></a></li>
<li><a href="http://www.1000phone.com"><img src="img/4.jpg" alt="文字4" /></a></li>
</ul>
</div>
<script>
new Slider('#slide1');
</script>
</body>
</html>
2.css
ul,
ol,
li {
padding: 0;
margin: 0;
list-style: none;
}
/* 大框 */
.container {
width: 500px;
height: 300px;
margin: 50px auto;
position: relative;
}
/* 文字框 */
#msg {
width: 100%;
height: 40px;
line-height: 40px;
text-indent: 10px;
position: absolute;
bottom: 0px;
left: 0;
color: white;
font-size: 16px;
background: rgba(0, 0, 0, .8);
cursor: pointer;
z-index: 1;
}
ul li a {
display: block;
}
img {
width: 500px;
height: 300px;
}
/* 小圆点 */
ol {
position: absolute;
bottom: 10px;
left: 50%;
-webkit-transform: translateX(-50%);
background: rgba(255, 255, 255, .6);
border-radius: 7px;
padding: 3px;
z-index: 2;
}
ol li {
background: red;
float: left;
width: 8px;
height: 8px;
margin-left: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
margin-right: 7px;
}
/* 左按钮 */
span {
width: 30px;
height: 45px;
line-height: 45px;
font-size: 40px;
color: white;
background: rgba(255, 255, 255, .3);
cursor: pointer;
position: absolute;
font-weight: bold;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transition: all 1s ease 0s;
}
/* 右按钮 */
#rtBtn {
right: 0;
left: auto;
}
span:hover {
-webkit-transform: rotateY(40deg) translateX(-3px) scale(1.2);
}
3.js代码
class Slider {
constructor(selector) {
// 1. 大盒子
this.big_box = document.querySelector(selector);
// 2. 所有的大图
this.ul_li = this.big_box.children[0].children;
// 3. 计算大图的数量
this.num = this.ul_li.length;
// 4. 创建页面元素并返回所有的小圆点
this.ol_li = this.addEle(); //调用完善页面的方法,获取小圆点
// 5. 获取左按钮
this.lt_btn = $('#ltBtn');
// 6. 获取右按钮
this.rt_btn = $('#rtBtn');
// 7. 当前下标
this.cur_index = 0;
//调用添加事件的方法
this.addEvent();
// 8. 文字信息框
this.msg = $('#msg');
this.slider();
// 9. 计时器
this.timer = null;
this.autoPlayer();
}
addEle() {
// 1. 完善页面
// 1》左按钮
let span = $create('span');
span.innerHTML = '<';
span.id = 'ltBtn';
this.big_box.appendChild(span);
// 2》右按钮
span = $create('span');
span.innerHTML = '>';
span.id = 'rtBtn';
this.big_box.appendChild(span);
// 3》文字信息框
let div = $create('div');
div.id = 'msg';
this.big_box.appendChild(div);
// 4》小圆点(ol li)
let ol = $create('ol');
let arr = [];
for (let i = 0; i < this.num; i++) {
let li = $create('li');
ol.appendChild(li); //li放到ol中
arr.push(li); //收集所有的li到数组中
}
this.big_box.appendChild(ol);
return arr; //返回所有的小圆点
}
// 2. 添加事件
addEvent() {
// 1》左按钮-点击
// (当前下标 - 1)
// if(当前下标 === -1){
// 当前下标 = 最大下标。
// }
this.lt_btn.onclick = function () {
this.cur_index--;
if (this.cur_index === -1) {
this.cur_index = this.num - 1; //最大下标:长度-1
}
//切换图片
this.slider();
}.bind(this);
// 2》右按钮-点击
// (当前下标 + 1)
// if(当前下标 === 长度){
// 当前下标 = 0;
// }
this.rt_btn.onclick = function () {
this.cur_index++;
if (this.cur_index === this.num) {
this.cur_index = 0;
}
//切换图片
this.slider();
}.bind(this);
// 3》 小圆点-移入
// 当前下标 = 移入的下标
for (let i = 0; i < this.num; i++) {
this.ol_li[i].onmouseenter = function () {
this.cur_index = i;
//切换图片
this.slider();
}.bind(this);
}
}
// 3. 实现轮播
slider() {
//大图(display) 圆点(backgroundColor)
// 所有大图display = 'none';
// 所有圆点backgroundColor = 'red';
for (let i = 0; i < this.num; i++) {
this.ul_li[i].style.display = 'none';
this.ol_li[i].style.backgroundColor = 'red';
}
// 当前大图display = 'block'
// 当前圆点backgroundColor = 'blue'
this.ul_li[this.cur_index].style.display = 'block';
this.ol_li[this.cur_index].style.backgroundColor = 'blue';
// 设置文字信息
this.msg.innerText = this.ul_li[this.cur_index].children[0].children[0].alt;
}
autoPlayer() {
// 4. 自动轮播
// 计时器
// (当前下标 + 1)
// if(当前下标 === 长度){
// 当前下标 = 0;
// }
// 给大盒子添加移出事件-启动自动轮播
this.timer = setInterval(() => {
this.cur_index++;
if (this.cur_index === this.num) {
this.cur_index = 0;
}
this.slider();
}, 3000);
// 给大盒子添加移入事件-清除计时器
this.big_box.onmouseenter = function () {
clearInterval(this.timer);
}.bind(this);
// 给大盒子添加移出事件-启动自动轮播
this.big_box.onmouseleave = function () {
this.autoPlayer();
}.bind(this);
}
}
function $(ele) {
return document.querySelector(ele);
}
function $create(selector) {
return document.createElement(selector);
}