<!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: 300px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 300px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0px;
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" id="screen">
<ul>
<li>
<img src="images/1.jpg" width="500" height="300" />
</li>
<li>
<img src="images/2.jpg" width="500" height="300" />
</li>
<li>
<img src="images/3.jpg" width="500" height="300" />
</li>
<li>
<img src="images/4.jpg" width="500" height="300" />
</li>
<li>
<img src="images/5.jpg" width="500" height="300" />
</li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<!-- <script src="../move.js"></script> -->
<script>
// 1 获取节点
var olObj = document.querySelector(‘ol‘);
var boxObj = document.getElementById(‘box‘);
var ulObj = document.querySelector(‘ul‘);
var lisObj = ulObj.children;
var arrObj = document.getElementById(‘arr‘);
var leftObj = arrObj.firstElementChild;
var rightObj = arrObj.lastElementChild;
var screenObj = document.querySelector(‘.screen‘);
// 2 创建图片应的序列号
// 图片序列号的个数,与图片数量是相等的.
for (i = 0; i < lisObj.length; i++) {
var newLi = document.createElement(‘li‘);
// 添加li中的数字
newLi.innerHTML = i + 1;
// 3 添加属性值,在追加到ol中
newLi.setAttribute(‘index‘, i);
// 让第一张图片的序列号选中
if (i == 0)
newLi.className = ‘current‘;
//创建的序列号追加到ol中
olObj.appendChild(newLi)
// 给序列号,添加点击事件
newLi.onclick = fn;
}
// 记录当前操作的图片
var imgIndex = 0;
// 4 序列号的点击事件函数
function fn() {
//4.1 取出点击的序列号
//console.log(this)
var index = this.getAttribute(‘index‘);
// 4.2 设置ul移动的目标值
// console.log(screenObj.offsetWidth,index)
var target = screenObj.offsetWidth * index;
//4.3调用move函数,进行移动
//console.log(target)
startMove(ulObj, { left: -target })
// 4.4 让对应的序列号,处于选中状态
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].className = ‘‘;
}
this.className = ‘current‘;
// 4.5 记录当前操作的图片序列号
imgIndex = index;
}
/*****克隆第一张图片,放在最后********/
//obj.cloneNode() 克隆一个节点
var newImg = lisObj[0].cloneNode(true);
ulObj.appendChild(newImg);
/******左右按钮的处理*****/
// 鼠标移入
boxObj.onmouseenter = function () {
arrObj.style.display = ‘block‘;
}
// 移走隐藏
boxObj.onmouseleave = function () {
arrObj.style.display = ‘none‘;
}
// 左边按钮点击处理
// 点击左按钮,上一张图片出来
leftObj.onclick = function () {
//1 判断当前操作的是否是第一张图片
if (imgIndex == 0) { // 操作的是第一张图片
imgIndex = lisObj.length - 1; //
// console.log(imgIndex)
// 计算目标值,让第六张图片显示出来
var target = screenObj.offsetWidth * imgIndex;
ulObj.style.left = -target + ‘px‘;
// 调用ol下面第四个li的点击事件
imgIndex--; // 4
olObj.children[imgIndex].onclick();
} else { // 非第一张图片
imgIndex--;
// 调用ol中的li点击事件
olObj.children[imgIndex].onclick();
}
}
// 右边按钮点击显示下一张
rightObj.onclick = function () {
// 判断是否是最后一张图片(5张),下标是4
//console.log(imgIndex,olObj.children.length)
if (imgIndex == olObj.children.length - 1) {
//console.log(imgIndex) // 4
//思路:将第五张图片,移动到第六张图片(第六张和第一张一样)
// 当移动到第六张时,设置ulObj的left值为0px
imgIndex++;
var target = imgIndex * screenObj.offsetWidth;
// 调用移动函数,实现从第五张,切到第六张的效果
startMove(ulObj, { left: -target }, function () {
// 让第一张图片显示出来
ulObj.style.left = ‘0px‘;
imgIndex = 0;
})
// 修改图片的序列号选中状态
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].className = ‘‘;
}
// 让ol中序列号1处于选中状态
olObj.children[0].className = ‘current‘;
} else {
imgIndex++;
olObj.children[imgIndex].onclick();
}
}
// 图片自动播放效果
var times = setInterval(function () {
// 直接调用右键点击函数
rightObj.onclick();
}, 2000);
// 运动三要素,谁运动,运动方向,目标值
function startMove(obj,objArr,callback){
clearInterval(obj.times);
// 开关的设置
var onOff = false;
// 设置定时器
obj.times = setInterval(function(){
// 遍历属性对象中的值
for(var attr in objArr){
// 计算speed的值 使用目标值,减去实时位置,除以10
var tmpPos = parseInt(getPos(obj,attr));
var speed = (objArr[attr]-tmpPos)/10;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
// 临界值的判断
if((tmpPos+speed)==objArr[attr])
onOff = true;
// 让元素运动起来
obj.style[attr] = tmpPos+speed+‘px‘;
}
//根据开关状态, 清除定时器
if(onOff){
clearInterval(obj.times);
//判断是否传递回调函数
if(callback){
callback();
}
}
},30)
}
// 获取元素的实时位置的函数
function getPos(obj,attr){
if(obj.currentStyle){ // 获取css的样式
return obj.currentStyle[attr];
}else{
// console.log(obj,attr)
// console.log(getComputedStyle(obj)[attr])
return getComputedStyle(obj)[attr]
}
}
</script>
</body>
</html>
