//以下是需要用到的js? 最好封裝
function startMove(obj, json, fnend) {
????clearInterval(obj.timer); //防止定時(shí)器疊加????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.根據(jù)初始值和目標(biāo)值，進(jìn)行判斷確定speed方向，變形：緩沖運(yùn)動(dòng)????????????//距離越大，速度越大,下面的公式具備方向????????????var speed = (json[key] - cur) / 6; //出現(xiàn)小數(shù)????????????speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //不要小數(shù)部分，沒(méi)有這句話或晃動(dòng)
????????????if (cur != json[key]) { //width 200 heigth 400????????????????istrue = false; //如果沒(méi)有達(dá)到目標(biāo)值，開(kāi)關(guān)false????????????} else {????????????????istrue = true; //true true????????????}
????????????//3、運(yùn)動(dòng)????????????if (key == 'opacity') {????????????????obj.style.opacity = (cur speed) / 100;????????????????obj.style.filter = 'alpha(opacity:' (cur speed) ')';????????????} else {????????????????obj.style[key] = cur speed 'px'; //針對(duì)普通屬性 left top height ????????????}
????????}
????????//4.回調(diào)函數(shù):準(zhǔn)備一個(gè)開(kāi)關(guān),確保以上json所有的屬性都已經(jīng)達(dá)到目標(biāo)值,才能調(diào)用這個(gè)回調(diào)函數(shù)????????if (istrue) { //如果為true,證明以上屬性都達(dá)到目標(biāo)值了????????????clearInterval(obj.timer);????????????if (fnend) {????????????????fnend();//調(diào)用函數(shù)????????????}????????}
????}, 30); //obj.timer 每個(gè)對(duì)象都有自己定時(shí)器
}??//以下是實(shí)現(xiàn)代碼?<!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 () { //找節(jié)點(diǎn) 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;//當(dāng)前圖片下標(biāo) var zIndexNum = 2;//當(dāng)前圖片層級(jí) var timer = null; var iw = smallLi[0].offsetWidth; //設(shè)置最小ul的寬度 smallUl.style.width = (iw 10) * smallLi.length "px"; var arr = ["美圖1", "美圖2", "美圖3", "美圖4", "美圖5", "美圖6"]; //自動(dòng)輪播 timer = setInterval(next, 2000);//每隔兩秒切換一個(gè)圖片 //下一張的函數(shù) function next() { now ; if (now >= bigLi.length) {//大于ul的長(zhǎng)度，就將第一張圖片迅速放到最后 now = 0; zIndexReset(); } tab(); } function zIndexReset() { for (var li of bigLi) { li.style.zIndex = 0; } zIndexNum = 1;//重置變量，重置層級(jí)。 } //上一張函數(shù) 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 }); //內(nèi)容變化 textInf.innerHTML = arr[now]; length.innerHTML = `計(jì)算圖片數(shù)量${now 1}/6`; } //點(diǎn)擊按鈕切換 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.點(diǎn)擊小圖切換大圖 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">計(jì)算圖片數(shù)量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>來(lái)源：
http://www.icode9.com/content-4-167551.html
