<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
ul,ol{list-style:none;}
#play{500px;height:300px;position:relative;overflow:hidden;}
#play img{500px;height:300px;}
#play #ul{2000px;height:300px;position: absolute;}
#play #ul li{float:left;500px;height:300px;}
#play #ol{position:absolute;top:280px;left:210px;}
#play #ol li{10px;height:10px;border:2px solid green;border-radius:50%;float:left;margin:3px;}
/* #play #ol li.first{background:pink;} */
#play #prev{position: absolute; top:150px;left:5px;}
#play #next{position: absolute; top:150px;left:470px;}
</style>
</head>
<body>
<div id="play">
<ul id="ul">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<ol id="ol">
<li style="background: pink;"></li>
<li></li>
<li></li>
<li></li>
</ol>
<button id="prev"><</button>
<button id="next">></button>
</div>
<script>
// 获取对象
var Play = document.getElementById('play');
var ulObj = document.getElementById('ul');
var olObj = document.getElementById('ol');
var Ullist= ulObj.getElementsByTagName('li');
var Ollist= olObj.getElementsByTagName('li');
var Next = document.getElementById('next');
var Prev = document.getElementById('prev');
// 自动播放的定时器
var autoTimer;
// 默认显示第一张图片
var target = 0;
var step = 0;
// 下一张
Next.onclick = function(){
target++;
if(target==Ullist.length) target=0;
goTo(target);
}
// 上一张
Prev.onclick = function(){
target--;
if(target<0) target = Ullist.length-1;
goTo(target);
}
// 点击标记跳转到指定的图片
for(var i=0;i<Ollist.length;i++){
Ollist[i].onclick = getNum;
}
// 点击标记跳转到指定的图片 函数
function getNum(){
for(var i=0;i<Ollist.length;i++){
if(this == Ollist[i]){
goTo(i);
}
}
}
// 自动播放
function autoPlay(){
autoTimer = setInterval(function(){
target++;
// 到最后一张 就跳到第一张。
if(target==Ullist.length) target=0;
goTo(target);
}, 2000)
}
autoPlay();
// 跳到指定的图片
function goTo(num){
// alert(Play.offsetWidth)
// 切换标记的样式
for(var i=0;i<Ullist.length;i++){
if(num==i){
Ollist[num].style.background = 'pink';
}else{
Ollist[i].style.background = '';
}
}
moveTu(-num*Play.offsetWidth);
// ulObj.style.left = (-num*Play.offsetWidth)+'px';
}
// 让图片移动到指定的位置
function moveTu(targetPx){
var timer = setInterval(function(){
step += (targetPx - ulObj.offsetLeft)/3;
if(targetPx-ulObj.offsetLeft==0){
ulObj.style.left = targetPx+'px';
clearInterval(timer)
}
// console.log(step);
ulObj.style.left = step +'px';
}, 30)
}
// 鼠标移动到幻灯片让定时器停止
Play.onmouseover = function(){
clearInterval(autoTimer);
}
// 鼠标移除幻灯片自动播放开始
Play.onmouseout = function(){
autoPlay();
}
</script>
</body>
</html>