<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
#sliderWrap {
position: relative;
margin: 0 auto;
width: 730px;
height: 454px;
margin-top: 200px;
overflow: hidden;
}
#sliderContent {
position: absolute;
height: 100%;
left: -730px;
}
#sliderContent a {
float: left;
display: inline-block;
height: 100%;
}
#sliderNumber {
position: absolute;
top: 420px;
left: 290px;
}
#sliderNumber ul {
display: flex;
width: 150px;
justify-content: space-between;
list-style-type: none;
cursor: pointer;
}
#sliderNumber ul li {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgb(62, 62, 62);
color: white;
text-align: center;
line-height: 20px;
}
.button {
position: absolute;
top: 200px;
width: 30px;
height: 60px;
line-height: 60px;
text-align: center;
background: rgba(0, 0, 0, 0.2);
color: white;
font-size: 32px;
cursor: pointer;
display: none;
}
#sliderBtnRight {
left: 700px;
}
</style>
</head>
<body>
<div class="slider_wrap" id="sliderWrap">
<div class="slider_content" id="sliderContent">
<a href="#" target="_blank"><img src="images/006.jpg" alt="" /></a>
<a href="#" target="_blank"><img src="images/001.jpg" alt="" class="show"/></a>
<a href="#" target="_blank"><img src="images/002.jpg" alt="" class="show"/></a>
<a href="#" target="_blank"><img src="images/003.jpg" alt="" class="show"/></a>
<a href="#" target="_blank"><img src="images/004.jpg" alt="" class="show"/></a>
<a href="#" target="_blank"><img src="images/005.jpg" alt="" class="show"/></a>
<a href="#" target="_blank"><img src="images/006.jpg" alt="" class="show"/></a>
<a href="#" target="_blank"><img src="images/001.jpg" alt="" /></a>
</div>
<div id="sliderNumber">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div class="button" id="sliderBtnLeft">
<
</div>
<div class="button" id="sliderBtnRight">
>
</div>
</div>
</body>
<script src="tween.js" charset="utf-8"></script>
<script type="text/javascript">
var sliderWrap = document.getElementById('sliderWrap');
var sliderContent = document.getElementById('sliderContent');
var sliderBtnLeft = document.getElementById('sliderBtnLeft');
var sliderBtnRight = document.getElementById('sliderBtnRight');
var aTags = document.getElementsByTagName('a');
// querySelector和querySelectorAll是经过css选择器来选取对应的标签或者符合条件的标签
var lis = document.querySelectorAll('#sliderNumber li'); //获取li数组
var imgs = document.querySelectorAll('.show');//获取除了第一张和最后一张以外的图片
// 一、根据图片的数量从新定义content的宽度
sliderContent.style.width = aTags[0].offsetWidth * aTags.length + 'px';
// 二、对slierWrpt进行鼠标移入移出事件添加 ;鼠标移入left、right按钮显示，移出隐藏
sliderWrap.onmouseenter = function() {
sliderBtnLeft.style.display = 'block';
sliderBtnRight.style.display = 'block';
}
sliderWrap.onmouseleave = function() {
sliderBtnLeft.style.display = 'none';
sliderBtnRight.style.display = 'none';
}
/* 三、对鼠标移入，移出left、right按钮添加事件；鼠标移入到sliderBtnLeft，sliderBtnRight时
自动播放中止；鼠标移出时自动播放开始 */
sliderBtnLeft.onmouseenter = function() {
clearInterval(timerOutter);
}
sliderBtnLeft.onmouseleave = function() {
timerOutter = setInterval('animateMove(lastIndex + 1, 1 ,true)',2000);
}
sliderBtnRight.onmouseenter = function() {
clearInterval(timerOutter);
}
sliderBtnRight.onmouseleave = function() {
timerOutter = setInterval('animateMove(lastIndex + 1, 1 ,true)',2000);
}
/* 四、对鼠标点击left、right按钮添加点击事件；点击sliderBtnLeft时，中止自动播放，图片向右移动，
点击sliderBtnRight时，中止自动播放，图片向左移动*/
sliderBtnLeft.onclick = function() {
clearInterval(timerOutter);
animateMove(lastIndex - 1, -1, false);
lastIndex--;
}
sliderBtnRight.onclick = function() {
clearInterval(timerOutter);
lastIndex = animateMove(lastIndex + 1, 1, false);
lastIndex++;
}
// 其次定义轮播图必备的变量
var t = 0;// current times, 当前执行动画的次数
var b = 0; // begin value, 起始值
var c = -730; //change in value, 变化值
var d = 70; // duration,持续时间
var timer; // 自动轮播定时器
var timerOutter; //定时器
var lastIndex = 0; //上一个显示的图片在数组中的下标
/*五、对鼠标放入数组lis中添加事件；鼠标放入lis中中止自动播放，左右按钮隐藏，且显示当前图片
鼠标移开lis中先清理定时器，左右按钮显示，恢复自动播放*/
for (var i = 0; i < lis.length; i++) {
// 给每一个li标签设定自定义属性index，记录其在数组中的下标
lis[i].index = i;
lis[i].onmouseenter = function() {
clearInterval(timerOutter);
sliderBtnLeft.style.display = 'none';
sliderBtnRight.style.display = 'none';
animateMove(event.target.index, event.target.index - lastIndex, false);
}
lis[i].onmouseleave = function() {
clearInterval(timerOutter);
sliderBtnLeft.style.display = 'block';
sliderBtnLeft.style.display = 'block';
lastIndex = event.target.index;
timerOutter = setInterval('animateMove(lastIndex + 1, 1, true)', 2000)
}
}
/*六、对lis数字标签颜色处理，显示当前图片时背景变为红色，其余的为灰色
*/
function showCurrentNumberTag(index) {
for (var i = 0; i < lis.length; i++) {
lis[i].style.background = 'rgb(62,62,62)';
}
lis[index].style.background = 'rgb(180,30,30)'; // 根据传入的下标更改当前数字标签颜色
}
// 调用函数，初始为index为0；
showCurrentNumberTag(0);
/*
七、 定义位移动画函数
currentIndex:当前须要执行位移动画的图片的下标
count:一共有多少张图片须要一次执行位移动画
isAuto:是不是自动轮播，即定时器调用仍是手动点击
*/
function animateMove(currentIndex,count,isAuto) {
// 为了确保不出错，每次位移动画时先清除定时器
clearInterval(timer);
b = -730 * (lastIndex + 1);
c = -730 * count;
function move() {
t++;
sliderContent.style.left = Tween.Linear(t,b,c,d) + 'px';
if (t == d) {
clearInterval(timer);
t = 0; //复位
}
}
timer = setInterval(move,1); // 启动定时器timer
/*判断图片移动到最左边和最右边时修改,
当图片移动到最左边时，修改数字标签颜色，把左边的图片移动到右边上一张图片为最后一张，即lastIndex = [5];
当图片移动到最右边时，修改数字标签颜色，把右边的图片移动到左边上一张图片为最后一张，即lastIndex = [0];
其余状况图片展现为当前index；
*/
if (currentIndex == -1) {
showCurrentNumberTag(imgs.length - 1);
sliderContent.style.left = -730 * imgs.length + 'px';
lastIndex = imgs.length;
} else if (currentIndex == imgs.length) {
showCurrentNumberTag(0);
sliderContent.style.left = -730 + 'px';
lastIndex = isAuto ? 0 : -1;
} else {
showCurrentNumberTag(currentIndex);
if (isAuto) {
lastIndex++;
}
}
return lastIndex;
}
// 启动定时器
timerOutter = setInterval('animateMove(lastIndex + 1, 1 ,true)',1000);
</script>
</html>