//以下是JS文件中的需要用的函数 可自行封装
function startMove(obj, json, fnend) {
clearInterval(obj.timer); //防止定时器叠加
obj.timer = setInterval(function () {
var istrue = true;
//1.获取属性名，获取键名：属性名->初始值
for (var key in json) { //key:键名 json[key] :键值
// console.log(key); //width heigth opacity
var cur = 0; //存初始值
if (key == 'opacity') { //初始值
cur = getstyle(obj, key) * 100; //透明度
} else {
cur = parseInt(getstyle(obj, key)); // 300px 300 width heigth borderwidth px为单位的
}
//2.根据初始值和目标值，进行判断确定speed方向，变形：缓冲运动
//距离越大，速度越大,下面的公式具备方向
var speed = (json[key] - cur) / 6; //出现小数
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //不要小数部分，没有这句话或晃动
if (cur != json[key]) { //width 200 heigth 400
istrue = false; //如果没有达到目标值，开关false
} else {
istrue = true; //true true
}
//3、运动
if (key == 'opacity') {
obj.style.opacity = (cur + speed) / 100;
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
} else {
obj.style[key] = cur + speed + 'px'; //针对普通属性 left top height
}
}
//4.回调函数:准备一个开关,确保以上json所有的属性都已经达到目标值,才能调用这个回调函数
if (istrue) { //如果为true,证明以上属性都达到目标值了
clearInterval(obj.timer);
if (fnend) {
fnend();//调用函数
}
}
}, 50); //obj.timer 每个对象都有自己定时器
}
//以下是代码操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/*图片的样式*/
#box,
#box2 {
width: 500px;
height: 300px;
background: #d8d8d8;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.imglist {
width: 500px;
height: 300px;
}
.imglist li {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 40px;
color: red;
}
.imglist li img {
width: 100%;
height: 100%;
}
.imglist li:nth-child(1) {
background: #0088CC;
}
.imglist li:nth-child(2) {
background: lemonchiffon;
}
.imglist li:nth-child(3) {
background: lavenderblush;
}
.imglist li:nth-child(4) {
background: lightcoral;
}
.imglist li:nth-child(5) {
background: lightcyan;
}
.imglist li:nth-child(6) {
background: lightgreen;
}
/*焦点样式*/
.light {
width: 500px;
height: 20px;
position: absolute;
left: 0;
bottom: 10px;
/*background: #ccc;*/
text-align: center;
}
.light span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #d8d8d8;
font-size: 14px;
text-align: center;
line-height: 20px;
cursor: pointer;
/*让焦点的文字消失的方法*/
/*text-indent: -9999px;
overflow: hidden;*/
}
.light span.active {
background: orangered;
}
.light span.liang {
background: lightcoral;
}
/*左右按钮样式*/
.posibtn {
width: 500px;
height: 50px;
position: absolute;
left: 0;
top: 50%;
margin-top: -25px;
/*background: #ccc;*/
}
.posibtn p {
width: 50px;
height: 50px;
background: rgb(98, 155, 199);
cursor: pointer;
position: absolute;
top: 0;
font-size: 50px;
color: #fff;
text-align: center;
line-height: 50px;
opacity: 0.3;
}
.posibtn p::selection {
background: transparent;
}
.posibtn p:nth-child(1) {
left: 10px;
}
.posibtn p:nth-child(2) {
right: 10px;
}
</style>
<script src="./common.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
轮播图写法步骤：
- 所有的图片放在右侧
- 开启定时器自动轮播：旧图挪走，新图进入
- 点击左右按钮可以切换
- 焦点跟随
- 点击焦点也可以切换对应的图片
*/
window.onload = function () {
// alert(1232);
var box = document.getElementById('box');
var imglist = box.children[0];//div
var light = box.children[1];//焦点
var posibtn = box.children[2];//按钮
var prevbtn = posibtn.children[0];//上一张
var nextbtn = posibtn.children[1];//下一张
var lis = imglist.getElementsByTagName('li');
var iw = lis[0].offsetWidth;//运动距离
var now = 0;//当前可视区图片的下标
//1.所有的图片放在右侧
for (var li of lis) {
li.style.left = iw + 'px';
}
lis[0].style.left = 0;//第一张放可视区
//2.开启定时器自动轮播
var timer = null;
function next() {//下一张
// console.log(now++);
//旧图挪走:左侧
startMove(lis[now], { 'left': -iw });//0
//新图进入可视区：
now = ++now >= lis.length ? 0 : now;//自增，这句话之前的就是旧图，这句话之后的就是新图
lis[now].style.left = iw + 'px';//放在右侧 1
startMove(lis[now], { 'left': 0 });
lightMove();//焦点跟随
}
function prev() {//上一张
//旧图挪走:右侧
startMove(lis[now], { 'left': iw });
//新图快速放在左侧再挪到可视区
now = --now <= -1 ? lis.length - 1 : now;
lis[now].style.left = -iw + 'px';
startMove(lis[now], { 'left': 0 });
lightMove();//焦点跟随
}
timer = setInterval(next, 2000);//每隔两秒钟切换一个图片
//3.点击左右按钮可以切换
//鼠标移入停止运动
box.onmouseover = function () {
clearInterval(timer);
}
//鼠标移开继续运动
box.onmouseout = function () {
timer = setInterval(next, 3000);
}
//另类的需求：点击切换图片的时候：如果两次点击的时间间隔太短，让第二次点击无效
//下一张
var oldtime = new Date();
nextbtn.onclick = function () {
if (new Date() - oldtime >= 800) {
next();
}
oldtime = new Date();
}
//上一张
prevbtn.onclick = function () {
prev();
}
//4.焦点跟随
//创建焦点
var html = '';
for (var i = 0; i < lis.length; i++) {
html += '<span>' + (i + 1) + '</span>';
}
light.innerHTML = html;
light.children[0].className = 'active';
function lightMove() {
//排他
for (var i = 0; i < lis.length; i++) {
light.children[i].className = '';
}
light.children[now].className = 'active';
}
//5.点击焦点切换到对应的图片
//事件委托
// light.onclick = function(ev) {
// if(ev.target.tagName.toLowerCase() == 'span') {
// //判断点击的是哪个
// for(var i = 0; i < light.children.length; i++) {
// if(ev.target == light.children[i]) {
// console.log(i);
// }
// }
// }
// }
//es6
for (let i = 0; i < light.children.length; i++) {
light.children[i].onclick = function () {
// console.log(i);
var index = i;//点击的当前焦点的下标
if (index > now) {
//从右边切入新图
//旧图：放到左边
startMove(lis[now], { 'left': -iw });
//新图：快速放在右侧，再挪到可视区
lis[index].style.left = iw + 'px';
}
if (index < now) {
//从左边切入新图
//旧图：放到右边
startMove(lis[now], { 'left': iw });
//新图：快速放在左侧，再挪到可视区
lis[index].style.left = -iw + 'px';
// startMove(lis[index],{'left' : 0});
}
startMove(lis[index], { 'left': 0 });
//新图变旧图
now = index;
lightMove();//焦点跟随
}
}
}
</script>
</head>
<body>
<div id="box">
<!--图片列表-->
<div class="imglist">
<ul>
<li>
<img src="./img/1.jpg" alt="">
</li>
<li>
<img src="./img/2.jpg" alt="">
</li>
<li>
<img src="./img/3.jpg" alt="">
</li>
<li>
<img src="./img/4.jpg" alt="">
</li>
<li>
<img src="./img/5.jpg" alt="">
</li>
<li>
<img src="./img/6.jpg" alt="">
</li>
</ul>
</div>
<!--焦点图-->
<p class="light">
<!--<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>-->
</p>
<!--上下按钮-->
<div class="posibtn">
<p class="prev"><</p>
<p class="next">></p>
</div>
</div>
</body>
</html>