//以下是需要用到的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();//调用函数
}
}
}, 30); //obj.timer 每个对象都有自己定时器
}
//以下是实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: #666;
}
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
border: 0;
}
.play {
width: 400px;
height: 430px;
margin: 50px auto 0;
background: #999;
font: 12px Arial;
}
.big_pic {
width: 400px;
height: 320px;
overflow: hidden;
border-bottom: 1px solid #ccc;
background: #222;
position: relative;
}
.big_pic li {
width: 400px;
height: 320px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: url(../images/loading.gif) no-repeat center center;
}
.mark_left {
width: 200px;
height: 320px;
position: absolute;
left: 0;
top: 0;
background: red;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 3000;
}
.mark_right {
width: 200px;
height: 320px;
position: absolute;
left: 200px;
top: 0;
background: green;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 3000;
}
.big_pic .prev {
width: 60px;
height: 60px;
background: url(../images/btn.gif) no-repeat;
position: absolute;
top: 130px;
left: 10px;
z-index: 3001;
cursor: pointer;
filter: alpha(opacity: 0);
opacity: 0;
}
.big_pic .next {
width: 60px;
height: 60px;
background: url(../images/btn.gif) no-repeat 0 -60px;
position: absolute;
top: 130px;
right: 10px;
z-index: 3001;
cursor: pointer;
filter: alpha(opacity: 0);
opacity: 0;
}
.big_pic .text {
position: absolute;
left: 10px;
bottom: 4px;
z-index: 3000;
color: #ccc;
}
.big_pic .length {
position: absolute;
right: 10px;
bottom: 4px;
z-index: 3000;
color: #ccc;
}
.big_pic .bg {
width: 400px;
height: 25px;
background: #000;
filter: alpha(opacity=60);
opacity: 0.6;
position: absolute;
z-index: 2999;
bottom: 0;
left: 0;
}
.small_pic {
width: 380px;
height: 94px;
position: relative;
top: 7px;
left: 10px;
overflow: hidden;
}
.small_pic ul {
height: 94px;
position: absolute;
top: 0;
left: 0;
}
.small_pic li {
width: 120px;
height: 94px;
float: left;
padding-right: 10px;
background: url(../images/loading.gif) no-repeat center center;
cursor: pointer;
filter: alpha(opacity=60);
opacity: 0.6;
}
.small_pic .active {
opacity: 1;
}
.small_pic img {
width: 120px;
height: 94px;
}
</style>
<script src="./common.js"></script>
<script>
window.onload = function () {
//找节点
var playimages = document.querySelector("#playimages");
var prevbtn = getid("prev");
var nextbtn = getid("next");
var mark_left = getid("mark_left");
var mark_right = getid("mark_right");
var textInf = getid('text');
var length = getid('length');
var bigLi = document.querySelectorAll('#big_pic li');
var smallUl = getid('small');
var smallLi = smallUl.querySelectorAll('li');
var imglist = smallUl.getElementsByTagName('img');
var now = 0;//当前图片下标
var zIndexNum = 2;//当前图片层级
var timer = null;
var iw = smallLi[0].offsetWidth;
//设置最小ul的宽度
smallUl.style.width = (iw + 10) * smallLi.length + "px";
var arr = ["美图1", "美图2", "美图3", "美图4", "美图5", "美图6"];
//自动轮播
timer = setInterval(next, 2000);//每隔两秒切换一个图片
//下一张的函数
function next() {
now++;
if (now >= bigLi.length) {//大于ul的长度，就将第一张图片迅速放到最后
now = 0;
zIndexReset();
}
tab();
}
function zIndexReset() {
for (var li of bigLi) {
li.style.zIndex = 0;
}
zIndexNum = 1;//重置变量，重置层级。
}
//上一张函数
function prev() {
now--;
if (now <= -1) {
now = bigLi.length - 1;
zIndexReset();
}
tab();
}
//切换图片
function tab() {
//先用再加 翻滚到上面
bigLi[now].style.zIndex = zIndexNum++;
bigLi[now].style.height = 0;
startMove(bigLi[now], { "height": 320 });
//小图的轮播
if (now == 0) {
smallUl.style.left = 0;
} else if (now == smallLi.length - 1) {
smallUl.style.left = -iw * (now - 2) + "px";
} else {
startMove(smallUl, { "left": -iw * (now - 1) });
}
//高亮 排他
for (var li of smallLi) {
li.style.opacity = 0.6;
li.style.filter = "alpah(opacity=60)";
}
startMove(smallLi[now], { "opacity": 100 });
//内容变化
textInf.innerHTML = arr[now];
length.innerHTML = `计算图片数量${now + 1}/6`;
}
//点击按钮切换
playimages.onmouseover = function () {
clearInterval(timer);
}
playimages.onmouseout = function () {
timer = setInterval(next, 2000);
}
//显示按钮
prevbtn.onmouseover = mark_left.onmouseover = function () {
startMove(prevbtn, { 'opacity': 100 });
}
prevbtn.onmouseout = mark_left.onmouseout = function () {
startMove(prevbtn, { 'opacity': 0 });
}
nextbtn.onmouseover = mark_right.onmouseover = function () {
startMove(nextbtn, { 'opacity': 100 });
}
nextbtn.onmouseout = mark_right.onmouseout = function () {
startMove(nextbtn, { 'opacity': 0 });
}
//下一张
nextbtn.onclick = function () {
next();
}
//上一张
prevbtn.onclick = function () {
prev();
}
//3.点击小图切换大图
for (let i = 0; i < imglist.length; i++) {
imglist[i].onclick = function () {
now = i;
tab();
}
}
}
</script>
</head>
<body>
<div id="playimages" class="play">
<ul class="big_pic" id="big_pic">
<div class="prev" id="prev"></div>
<div class="next" id="next"></div>
<a id="mark_left" class="mark_left" href="javascript:;"></a>
<a id="mark_right" class="mark_right" href="javascript:;"></a>
<div class="bg">
<div id="text" class="text">美图1</div>
<div id="length" class="length">计算图片数量1/6</div>
</div>
<li style="z-index:1;">
<img src="images/1.jpg" />
</li>
<li>
<img src="images/2.jpg" />
</li>
<li>
<img src="images/3.jpg" />
</li>
<li>
<img src="images/4.jpg" />
</li>
<li>
<img src="images/5.jpg" />
</li>
<li>
<img src="images/6.jpg" />
</li>
</ul>
<div class="small_pic">
<ul style="width:390px;" id="small">
<li class="active">
<img src="images/1.jpg" />
</li>
<li>
<img src="images/2.jpg" />
</li>
<li>
<img src="images/3.jpg" />
</li>
<li>
<img src="images/4.jpg" />
</li>
<li>
<img src="images/5.jpg" />
</li>
<li>
<img src="images/6.jpg" />
</li>
</ul>
</div>
</div>
</body>
</html>