js实现轮播图（原生JS，没有任何框架）
//以下是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>
更多精彩
