搜索到
2
篇与
轮播图
的结果
-
HTML5+CSS3+JavaScript实现大图滚动轮播功能 HTML5+CSS3+JavaScript实现大图滚动轮播功能预览{anote icon="" href="https://000081.xyz/html/219.html" type="success" content="点我预览"/}源代码<!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title>大图滚动</title> </head> <style> * { border: 0; padding: 0; margin: 0; box-sizing: border-box; } .box { overflow: hidden; width: 1300px; height: 400px; } .lunbo { float: left; width: 2600px; height: 400px; } .lunbo > img { float: left; width: 260px; height: 400px; } </style> <body> <div class="box"> <div class="lunbo" id="lunbo"> <img src="http://pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif,%20//pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif%202x" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200au8kyla1649663936904/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200upu5qi11648787330562/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200awcmu741648630288660/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/dt9oaxh094144711649149461225/350" /> <img src="http://pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif,%20//pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif%202x" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200au8kyla1649663936904/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200upu5qi11648787330562/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200awcmu741648630288660/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/dt9oaxh094144711649149461225/350" /> </div> </div> <input style="width:100px;height:50px;margin-top: 50px;margin-left: 625px" type="button" onclick="fangxiang()" value="点我改变方向"> </body> <script> // 定时器锁 var time_lock = true; // 鼠标锁 var mouse_lock = true; // 轮播对象 var lunbo = document.getElementById("lunbo"); // 速度，正数向右滚动，负数向左滚动 var speed = -1; function fangxiang(){ speed *= -1; } // 初始赋值 if (speed < 0) { lunbo.style.marginLeft = "0px"; } else { lunbo.style.marginLeft = "-1300px"; } //定时器 var timer = setInterval(() => { if (time_lock && mouse_lock) { // 取当前位移量 var l = parseInt(lunbo.style.marginLeft); // 每到一张完整的图片就停一秒 if (l % 260 == 0) { time_lock = false; setTimeout(() => { time_lock = true; }, 1000); } // 使图片循环 if (l > 0 || l < -1300) { if (speed < 0) { lunbo.style.marginLeft = "0px"; } else { lunbo.style.marginLeft = "-1300px"; } return; } lunbo.style.marginLeft = l + speed + "px"; } }, 1); // 鼠标进入轮播图则停止滚动 lunbo.onmouseover = function () { mouse_lock = false; }; // 鼠标退出轮播图则继续滚动 lunbo.onmouseout = function () { mouse_lock = true; }; </script> </html> -
HTML5+CSS3+JavaScript实现位移轮播图 HTML5+CSS3+JavaScript实现位移轮播图演示 * { border: 0; box-sizing: border-box; padding: 0; } .wp { width: 800px; height: 200px; overflow: hidden; } .box { width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 2em; float: left; } .box1 { background: skyblue; } .box2 { background: yellow; } .box3 { background: orangered; } .box4 { background: brown; } .btm { overflow: hidden; } .btm div { width: 50px; height: 50px; text-align: center; line-height: 50px; float: left; } .btm1 { background: skyblue; } .btm2 { background: yellow; } .btm3 { background: orangered; } .btm4 { background: brown; } .next_div { float: left; width: 50px; height: 50px; background-color: transparent; color: black; margin-left: 100px; text-align: center; line-height: 50px; font-size: 35px; } .last_div { float: left; width: 50px; height: 50px; background-color: transparent; color: black; text-align: center; line-height: 50px; font-size: 35px; } 甲 乙 丙 丁 甲 乙 丙 丁 《 》 //四个div拼起来的盒子 var _all_box = document.getElementById("wp"); //四个大正方形 var _box = _all_box.getElementsByTagName("div"); //四个按钮 var _btm = document.getElementsByClassName("btm"); //当前位置索引 var index = 1; //线程锁(防止定时器卡时间，比如一次性跳两页) var lock = false; for (let i = 1; i < _btm.length; i++) { _btm[i].onclick = function () { //取当前位置 var start = _all_box.style.marginLeft; //如果没有设置过marginLeft，那就会返回空，判断为空则左边距是0px if (start == "") start = 0 + "px"; //转数字 var pos = parseInt(start); //终点位置 var zhong = -200 * (i - 1); //定时器做动画 var flash = setInterval(qiehuan, 5); //启用线程锁 lock = true; //定时器执行的函数 function qiehuan() { //如果位置相等，清定时器 if (pos == zhong) { window.clearInterval(flash); } else { //大减小加 if (pos > zhong) { pos -= 25; } if (pos < zhong) { pos += 25; } //改变数值 _all_box.style.marginLeft = pos + "px"; } } //设置当前索引 index = i; }; } //下一页，触发下一控件onclick事件 function next() { //如果等于最后一个div，则返回第一个-1 if (index == 4) { index = 0; } index++; //触发onclick函数 _btm[index].onclick(); } //上一页，触发上一控件onclick事件 function last() { //如果等于第一个div，则返回最后一个+1 if (index == 1) { index = 5; } index--; //触发onclick函数 _btm[index].onclick(); } //添加上一页点击事件 document.getElementById("last_div").onclick = function () { lock = true; last(); }; //添加下一页点击事件 document.getElementById("next_div").onclick = function () { lock = true; next(); }; //轮播定时器,3秒循环 setInterval(() => { //如果线程锁启用，则跳过下一页函数，置线程锁为关闭。否则执行下一页函数 if (!lock) { next(); } lock = false; }, 3000); 源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { border: 0; box-sizing: border-box; padding: 0; } .wp { width: 1600px; height: 400px; overflow: hidden; } .box { width: 400px; height: 400px; text-align: center; line-height: 400px; font-size: 4em; float: left; } .box1 { background: skyblue; } .box2 { background: yellow; } .box3 { background: orangered; } .box4 { background: brown; } .btm { overflow: hidden; } .btm div { width: 100px; height: 50px; text-align: center; line-height: 50px; float: left; } .btm1 { background: skyblue; } .btm2 { background: yellow; } .btm3 { background: orangered; } .btm4 { background: brown; } .next_div { position: absolute; width: 50px; height: 50px; background-color: transparent; color: black; top: 175px; margin-left: 350px; text-align: center; line-height: 50px; font-size: 35px; } .last_div { position: absolute; width: 50px; height: 50px; background-color: transparent; color: black; top: 175px; text-align: center; line-height: 50px; font-size: 35px; } </style> </head> <body> <div style="width: 400px; height: 400px; overflow: hidden"> <div class="wp" id="wp"> <div class="box box1">甲</div> <div class="box box2">乙</div> <div class="box box3">丙</div> <div class="box box4">丁</div> </div> </div> <div class="btm"> <div class="btm1 btm" id="btm1">甲</div> <div class="btm2 btm" id="btm2">乙</div> <div class="btm3 btm" id="btm3">丙</div> <div class="btm4 btm" id="btm4">丁</div> </div> <div class="last_div" id="last_div">《</div> <div class="next_div" id="next_div">》</div> </body> <script> //四个div拼起来的盒子 var _all_box = document.getElementById("wp"); //四个大正方形 var _box = _all_box.getElementsByTagName("div"); //四个按钮 var _btm = document.getElementsByClassName("btm"); //当前位置索引 var index = 1; //线程锁(防止定时器卡时间，比如一次性跳两页) var lock = false; for (let i = 1; i < _btm.length; i++) { _btm[i].onclick = function () { //取当前位置 var start = _all_box.style.marginLeft; //如果没有设置过marginLeft，那就会返回空，判断为空则左边距是0px if (start == "") start = 0 + "px"; //转数字 var pos = parseInt(start); //终点位置 var zhong = -400 * (i - 1); //定时器做动画 var flash = setInterval(qiehuan, 5); //启用线程锁 lock = true; //定时器执行的函数 function qiehuan() { //如果位置相等，清定时器 if (pos == zhong) { window.clearInterval(flash); } else { //大减小加 if (pos > zhong) { pos -= 25; } if (pos < zhong) { pos += 25; } //改变数值 _all_box.style.marginLeft = pos + "px"; } } //设置当前索引 index = i; }; } //下一页，触发下一控件onclick事件 function next() { //如果等于最后一个div，则返回第一个-1 if (index == 4) { index = 0; } index++; //触发onclick函数 _btm[index].onclick(); } //上一页，触发上一控件onclick事件 function last() { //如果等于第一个div，则返回最后一个+1 if (index == 1) { index = 5; } index--; //触发onclick函数 _btm[index].onclick(); } //添加上一页点击事件 document.getElementById("last_div").onclick = function () { lock = true; last(); }; //添加下一页点击事件 document.getElementById("next_div").onclick = function () { lock = true; next(); }; //轮播定时器,3秒循环 setInterval(() => { //如果线程锁启用，则跳过下一页函数，置线程锁为关闭。否则执行下一页函数 if (!lock) { next(); } lock = false; }, 3000); </script> </html>
