<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
z-index: 1000;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id="box">
<div class="screen">
<ul>
<li><img src="../images/wf1.jpg" width="500" height="200" /></li>
<li><img src="../images/wf2.jpg" width="500" height="200" /></li>
<li><img src="../images/wf3.jpg" width="500" height="200" /></li>
<li><img src="../images/wf4.jpg" width="500" height="200" /></li>
<li><img src="../images/wf5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="../js/common.js"></script>
<script src="../js/animate.js"></script>
<script>
// 获取元素
var box = my$('box');
var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1];
var arr = my$('arr');
var arrLeft = my$('left');
var arrRight = my$('right');
var imgWidth = screen.offsetWidth;
// 1.动态生成序号
var count = ul.children.length;
for (var i = 0; i < count; i++) {
var li = document.createElement('li');
ol.appendChild(li);
setInnerText(li, i + 1);
// 让当前li记录它的索引
//设置标签自定义属性
li.setAttribute('index', i);
// 让序列1高亮显示
if (i === 0) {
li.classList.add('current');
}
// 2.点击序号，滚动到序号对应的图片
li.onclick = liClick; //事件在循环中调用，避免内存重复调用，改为函数调用
}
// ol中li点击事件
function liClick() {
// 2.1让ol里面的li取消高亮显示，让当前点击的li高亮显示
for (var i = 0; i < ol.children.length; i++) {
var li = ol.children[i];
li.classList.remove('current')
}
this.classList.add('current'); //this指向事件源 li
// 2.2让图片滚动到当前对应的位置
//获取图片宽度
// 获取当前li的索引值
var liIndex = parseInt(this.getAttribute('index')); // 这里要把字符串类型转成睡着类型
index = liIndex; //同步图片与ol中索引值
animate(ul, -liIndex * imgWidth);
}
// 3.鼠标放入盒子里面，自动显示上一张，下一张
box.onmouseenter = function () {
arr.style.display = 'block';
// 鼠标移入停止定时器
clearInterval(timeId);
}
box.onmouseleave = function () {
arr.style.display = 'none';
//鼠标移出开始定时器
timeId = setInterval(function () {
arrRight.click();
}, 2000);
}
// 4.点击上一张，下一章，图片对应切换
var index = 0; //第一张图片的索引
// 克隆li cloneNode() 复制节点
// 参数 true 复制节点中的内容
// false 只复制当前节点，不复制里面的内容
var liClone = ul.children[0].cloneNode(true); //克隆ul中第一张图片
ul.appendChild(liClone);
// ;
arrRight.onclick = function () {
// 判断是否是克隆的第一张图片，如果是克隆的第一张图片，此时修改ul的坐标，显示真正的第一张图片
if (index === count) {
index = 0;
ul.style.left = '0px';
}
// 总共有5张图片，但是还有一张克隆的图片 克隆的图片的索引是5
// 4 < 5
index++;
if (index < count) {
ol.children[index].click(); // 获取图片对应的序号，让序号点击
} else {
//如果是最后一张图片 以动画的方式，移动到克隆的第一张图片
animate(ul, - index * imgWidth);
// 取消所有序号的高亮显示，让第一序号高亮显示
for (var i = 0; i < ol.children.length; i++) {
var li = ol.children[i];
li.classList.remove('current');
if (i === 0) {
li.classList.add('current');
}
}
}
}
// 点击上一张
arrLeft.onclick = function () {
// 如果当前是第一张图片，此时要偷偷的切换到最后一张图片的位置（克隆的第一张图片）
if (index === 0) {
index = count;
ul.style.left = - index * imgWidth + 'px';
}
index--;
ol.children[index].click();
}
// 5.自动播放
var timeId = setInterval(function () {
arrRight.click();
}, 2000);
</script>
</body>
</html>
网友评论