//以下是需要用到的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>来源：
http://www.icode9.com/content-4-167551.html
