js实现简单的轮播图
html+css代码：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 730px;
height: 454px;
padding: 8px;
border: 1px solid green;
margin: 100px auto;
}
.inner {
position: relative;
overflow: hidden;
height: 454px;
}
#imglist {
width: 700%;
position: absolute;
left: 0;
}
li {
float: left;
}
.list {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -85px;
}
.list i {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
color: #333;
float: left;
font-style: normal;
line-height: 20px;
font-size: 14px;
text-align: center;
margin-right: 10px;
cursor: pointer;
}
.list i:last-child {
margin-right: 0;
}
.list i.current {
background-color: skyblue;
color: #fff;
}
.arrow {
position: absolute;
width: 100%;
top: 50%;
margin-top: -30px;
}
.arrow-left, .arrow-right {
width: 30px;
height: 60px;
position: absolute;
font: 20px/60px "consolas";
color: #fff;
background-color: rgba(0, 0, 0, .3);
text-align: center;
cursor: pointer;
}
.arrow-right {
right: 0;
}
style>
head>
<body>
<div class="box" id="box">
<div class="inner" id="inner">
<ul id="imglist">
<li><a href="#"><img src="images/1.jpg" alt="">a>li>
<li><a href="#"><img src="images/2.jpg" alt="">a>li>
<li><a href="#"><img src="images/3.jpg" alt="">a>li>
<li><a href="#"><img src="images/4.jpg" alt="">a>li>
<li><a href="#"><img src="images/5.jpg" alt="">a>li>
<li><a href="#"><img src="images/6.jpg" alt="">a>li>
<li><a href="#"><img src="images/7.jpg" alt="">a>li>
ul>
<div class="list">
<i class="current">1i>
<i>2i>
<i>3i>
<i>4i>
<i>5i>
<i>6i>
div>
<div class="arrow">
<span class="arrow-left"><span>
<span class="arrow-right">>span>
div>
div>
div>
body>
html>
js代码：
<script src="animate.js"></script>
<script>
/*
* 功能：
* 1 序号控制器切换<对应>图片 -- click
* 2 点击<左按钮>切换<下一张>图片 -- click
* 3 点击<右按钮>切换<上一张>图片 -- click
* 4 <自动>轮播，切换<下一张>图片 -- setInterval
* 5 鼠标移入轮播图的范围，<停止>自动轮播 -- mouseover clearInterval
* 6 鼠标移出轮播图的范围，重新<启动>自动轮播 -- mouseout
*
* */
/* 功能1：当__序号控制器__被__点击__时，效果是__切换对应的图片__ */
//获取序号控制器
var controlItems = document.querySelectorAll('.list>i');
//获取图片列表
var imgList = document.getElementById('imglist');
//获取图片的宽度
var imgWidth = document.querySelectorAll('#imglist img')[0].offsetWidth;
//给序号控制器添加点击事件
for(var i=0; i< controlItems.length; i++ ){
// 循环遍历内部
//给所有的控制器添加index索引值属性
controlItems[i].index = i;
//给所有的控制器添加点击事件
controlItems[i].onclick = function(){
/*切换序号*/
//排他，切换对应的序号，清除所有的类名
for(var i=0; i< controlItems.length; i++ ){
// 循环遍历内部
controlItems[i].className='';
}
//通过this确定当前点击的序号，添加类名
this.className = 'current';
/*根据索引值切换对应的图片*/
//获取索引值
var index = this.index;
//根据索引值计算目标位置
var target = index * imgWidth * -1;//这里不能带单位，因为动画要数学计算
//调用animate函数
animate(imgList,target);
}
}
/* 功能2：当__右按钮__被__点击__时，效果是__切换<下一张>图片__ */
//查找左右按钮
var arrowLeft = document.querySelector('.arrow-left');
var arrowRight = document.querySelector('.arrow-right');
var maxIndex = controlItems.length ;//最大的索引值
//定义一个控制图片和小圆点切换的索引值
var keyIndex = 0;
//给右按钮添加点击事件
arrowRight.onclick = moveRight;
function moveRight(){
//每次点击，索引值加1，用于切换到下一张图片
if(keyIndex == maxIndex){
keyIndex = 0;
/*若果达到了最大值6，让图片7瞬间变成图片1，为的就是图1切图2的时候有动画效果*/
imgList.style.left = 0;
}
keyIndex++;
// // 如果当前的索引值超出了最大索引值
// if(keyIndex > maxIndex){
// //重新变成0
// keyIndex = 0;
// }
// console.log(keyIndex);
/* 因为图片需要切换到第七张图片，所以最大的索引值应该能取到 6 */
//切换序号
for(var i=0; i< controlItems.length; i++ ){
// 循环遍历内部
controlItems[i].className = '';
}
if(keyIndex == maxIndex){
//如果索引值已经等于6，我们就让小圆点从0开始
controlItems[0].className = 'current';
}else{
controlItems[keyIndex].className = 'current';
}
//切换图片
var target = keyIndex * imgWidth * -1;
animate(imgList,target);
}
/* 功能3：当__左按钮__被__点击__时，效果是__切换<上一张>图片__ */
//给左按钮添加点击事件
arrowLeft.onclick = function(){
//每次点击时，索引值减1，和右按钮相反
if(keyIndex == 0){
keyIndex = maxIndex;
/* 如果到达了最小索引值0，让图片1瞬间变成图7，为的就是图7切图6的时候有动画效果 */
imgList.style.left = keyIndex * imgWidth * -1 + 'px';
}
keyIndex--;
/* 因为图片需要切换到第七张图片，所以最大的索引值应该能取到 6 */
//切换序号
for(var i=0; i< controlItems.length; i++ ){
// 循环遍历内部
controlItems[i].className='';
}
/*对于小圆点来说，索引值要控制好范围 0-5*/
if(keyIndex == maxIndex){
//如果索引值已经等于6，我们就让小圆点从0开始
controlItems[0].className='current';
}else{
controlItems[keyIndex].className = 'current';
}
//切换图片
var target = keyIndex * imgWidth * -1;
animate(imgList,target);
}
/*自动轮播*/
//每隔一段时间把向右的逻辑执行一次
var intervalId = setInterval(moveRight,1500);
//停止自动轮播
box.onmouseover = function(){
//鼠标移入的时候切换停止，清除定时器
clearInterval(intervalId);
}
box.onmouseout = function(){
//为了保证只有一个定时器启动，先把之前的清除掉
clearInterval(intervalId);
//鼠标移开的时候启动定时器
intervalId = setInterval(moveRight,1500);
}
</script>
animate.js
/**
*
* 封装动画函数 animate
* @param element 需要做动画的元素
* @param target 目标位置
* @param step 动画步长
**/
function animate(element, target, step) {
//* 清空原本的定时器，防止定时器重复启动 */
clearInterval(element.timer);
// 启动一个定时器，让一份数据累加，这份数据以后用于做动画效果
element.timer = setInterval(function () {
// 获取当前盒子的 水平 坐标值
var current = element.offsetLeft;
// 让数据累加
//* 拿当前位置和目标位置判断大小 */
/* 把步长定义成变量，定义默认值为 40 */
step = step || 40;
current += current < target ? step : -step;
// 把数据应用到盒子上，设置给 left 属性，让盒子动起来
element.style.left = current + 'px';
//* 判断是否需要停下来 */
// 如果目标位置 - 当前位置的值小于 步长，那么就需要停下来
//* 用绝对值函数取正数 */
if (Math.abs(target - current) < step) {
// 清除定时器停止运动
clearInterval(element.timer);
// 一瞬间把它设置到目标位置，防止无法到达目标位置
element.style.left = target + 'px';
}
}, 20);
}