标签：opacity function 轮播 flash js height var now left
//以下是需要用到的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>
标签：opacity,function,轮播,flash,js,height,var,now,left 来源： https://www.cnblogs.com/sun-shine1229/p/10732102.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。