1、轮播图(思路见代码)
实现效果:点击下方的按钮，实现相应的图片的切换，点击左右按钮，实现向左或者向右切换图片，轮播图自动轮播，当鼠标移到图片上方，自动轮播停止，鼠标移除后，自动轮播恢复
实现思路: 对标签的class属性的属性值进行操作，先写好对应的属性值的样式及效果，然后利用js对属性值进行操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ width: 360px; height: 277px; border: 10px solid #000; overflow: hidden; margin: 0 auto; position: relative; } .btns{ position: absolute; bottom: 20px; width: 100%; height: 20px; background: #fff; z-index: 999; } .btns button{ border-radius: 50%; } .content{ height: 257px; text-align: center; line-height: 257px; font-size: 100px; position: relative; } .box{ width: 100%; height: 100%; position: absolute; background: #000; color: #fff; opacity: 0; /* transform: rotate(0deg); */ transition: opacity 1s,transform 1s; } .box img{ width: 100%; height: 100%; } button.active{ color: aliceblue; background: black; } .box.active{ display: block; z-index: 1; opacity: 1; /* transform: rotate(360deg); */ } #left_btn,#right_btn{ position: absolute; top: 50%; margin-top: -10px; z-index: 999; } #right_btn{ right: 0; } </style> </head> <body> <div class="container"> <div class="btns"> <button data-index="0" class="btn active">1</button> <button data-index="1" class="btn">2</button> <button data-index="2" class="btn">3</button> </div> <div class="content"> <div class="box active"><img src="https://img20.360buyimg.com/da/s1180x940_jfs/t1/22886/39/6392/67839/5c53100aEeaae8352/7a4d3de1156321ae.jpg.webp" alt=""></div> <div class="box"><img src="https://img11.360buyimg.com/pop/s1180x940_jfs/t1/94077/40/13431/91413/5e57629eE39ab060a/4adceb3e5e3863fe.jpg.webp" alt=""></div> <div class="box"><img src="https://img20.360buyimg.com/pop/s1180x940_jfs/t1/95963/25/13739/84993/5e606cc3Eaf064df7/edd18ca669882399.jpg.webp" alt=""></div> </div> <button id="left_btn">left</button> <button id="right_btn">right</button> </div> <script> var ele_btns = document.querySelectorAll(".btn"); var ele_boxs = document.querySelectorAll(".box"); var ele_left = document.getElementById("left_btn"); var ele_right = document.getElementById("right_btn"); var ele_container = document.querySelector(".container") var index = null; //轮播图下方按钮 for(var i = 0; i < ele_btns.length; i++){ ele_btns[i].addEventListener("click" , function(){ //调用下方函数移除所有的active属性 removeClass(ele_btns , "active"); removeClass(ele_boxs , "active"); for(var j = 0; j < ele_btns.length; j++){ //确定点击的按钮对应的图片 if(this === ele_btns[j]){ break; } } //将对应的图片的下标赋值给全局变量,(对应下标即获取的ele_boxs中的下标) index = j; //给当前点击的按钮添加active属性 this.className += " active"; //给当前对应的按钮的图片添加active属性 ele_boxs[index].className += " active"; }) } //左边按钮 ele_left.addEventListener("click" , function(){ //调用下方函数移除所有的active属性 removeClass(ele_btns , "active"); removeClass(ele_boxs , "active") //向左切换，即下标递减 index--; //当下标小于0时从左后面的图片重新开始 if(index < 0){ index = ele_btns.length -1; } //对应的按钮及图片添加active ele_btns[index].className += " active"; ele_boxs[index].className += " active" }) ele_right.addEventListener("click" , function(){ removeClass(ele_btns , "active"); removeClass(ele_boxs , "active") index++; if(index > ele_btns.length - 1){ index = 0; } ele_btns[index].className += " active"; ele_boxs[index].className += " active" }) //定时自动轮播图片 var timer = null; timer = setInterval(function(){ removeClass(ele_btns , "active"); removeClass(ele_boxs , "active") index++; if(index > ele_btns.length - 1){ index = 0; } ele_btns[index].className += " active"; ele_boxs[index].className += " active" } , 1000) //当鼠标移到图片上方时，停止自动轮播 ele_container.addEventListener("mouseover", function(){ clearInterval(timer); }) //当鼠标从图片上方移走时，开启自动轮播 ele_container.addEventListener("mouseout", function(){ timer = setInterval(function(){ removeClass(ele_btns , "active"); removeClass(ele_boxs , "active") index++; if(index > ele_btns.length - 1){ index = 0; } ele_btns[index].className += " active"; ele_boxs[index].className += " active" } , 1000) }) //清除所有的active属性 function removeClass(ele , class_name){ for(var i = 0; i <ele.length ; i++){ //将所有的属性名切割成数组 ele_class_arr = ele[i].className.split(" "); //如果数组中存在想要删除的属性(即上方的active属性)，就进入if中 if(ele_class_arr.indexOf(class_name) !== -1){ //删除掉active属性 ele_class_arr.splice(ele_class_arr.indexOf(class_name) , 1); } //将删除掉active属性的数组重新转换成字符串 ele_class_str = ele_class_arr.join(" "); //将转换完成之后的字符串赋予给对应的DOM的属性中 ele[i].className = ele_class_str; } } </script> </body> </html>
2、鼠标拖拽回放
实现效果:鼠标左键在box上方按下，保持鼠标左键按下拖拽鼠标，box会跟随鼠标一起移动，鼠标左键抬起，box停止跟随，点击回放按钮，box会按照原路径进行返回
实现思路:拖拽 :将鼠标的位置赋值给按照一定的规律赋值给box的偏移量，回放：将鼠标的移动坐标添加到一个对象中，点击回放，倒序将坐标赋值给box偏移量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: yellowgreen; position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="box"> <button id="replay">回放</button> </div> <script> var ele_box = document.getElementById("box"); var ele_replay = document.getElementById("replay") //开启鼠标拖拽判断 var flag = false; //鼠标按下时到box的距离 var offset_X = null; var offset_Y = null; //拖拽边界 var right_boundary = null; var bottom_boundary = null; var position_list = []; //鼠标按下 ele_box.addEventListener("mousedown" , function( evt ){ flag = true; var e = evt || event; //获取鼠标按下时距离box的边框的距离 offset_X = e.offsetX; offset_Y = e.offsetY; //右边界与下边界 right_boundary = document.body.offsetWidth - ele_box.offsetWidth; bottom_boundary = document.documentElement.clientHeight - ele_box.offsetHeight; //记录鼠标按下时box的位置 position_list.push({ x : ele_box.offsetLeft, y : ele_box.offsetTop }) console.log(position_list) }) //鼠标移动时 document.addEventListener("mousemove" , function( evt ){ var e = evt || event; if(flag === false){ return false } //让鼠标的光标处在鼠标点击的位置 var left = e.clientX - offset_X; var top = e.clientY - offset_Y; //判断时候到了边界 top = top <= 0 ? 0 : top; top = top >= bottom_boundary ? bottom_boundary : top; left = left <= 0 ? 0 :left; left = left >= right_boundary ? right_boundary : left; ele_box.style.left = left + "px"; ele_box.style.top = top + "px"; //在位置对象position_list中获取鼠标上一次移动的位置 var last_item = position_list[position_list.length - 1]; //只记录每次移动超过5px的位置 if(Math.abs(left - last_item.x) > 5 || Math.abs(top - last_item.y)){ position_list.push({ x : left, y : top }) } }) //鼠标抬起时，改变状态，关闭鼠标拖拽 ele_box.addEventListener("mouseup",function( evt ){ flag = false }) var timer = null; //回放功能,倒叙读取位置对象position_list中的每一个坐标 ele_replay.addEventListener("click",function(){ clearInterval(timer) timer = setInterval(function(){ // 删除数组之中最后一项,每个被删除的项都要单独使用一下; var item = position_list.pop(); ele_box.style.left = item.x + "px"; ele_box.style.top = item.y + "px"; if(position_list.length === 0){ clearInterval(timer); } },20) }) </script> </body> </html>
3、鼠标跟随提示框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tip-box{ position: absolute; left: 0; top: 0; width: 200px; height: 100px; background: #ddd; border: #b6b6b6; display: none; } li{ margin: 20px; } </style> </head> <body> <div class="container"> <ol class="title-list"> <li> <a href="" title="4399小游戏">4399小游戏</a> <div class="tip-box"> 4399小游戏4399小游戏4399小游戏4399小游戏4399小游戏4399小游戏4399小游戏4399小游戏 </div> </li> <li> <a href="">7k7k7k小游戏</a> <!-- 提示框 --> <div class="tip-box"> 7k7k7k小游戏7k7k7k小游戏7k7k7k小游戏7k7k7k小游戏7k7k7k小游戏7k7k7k小游戏7k7k7k小游戏 </div> </li> </ol> </div> <script> var ele_a = document.querySelectorAll(".title-list a"); for(var i = 0; i < ele_a.length; i++){ //鼠标移入时触发事件，显示提示框 ele_a[i].addEventListener("mouseover", function( evt ){ var ele_tip = this.nextElementSibling; ele_tip.style.display = "block" var e = evt || event ele_tip.style.left = e.pageX + "px"; //提示框和鼠标保持距离 ele_tip.style.top = e.pageY + 20 + "px" }) //鼠标移动时，提示框跟着移动 ele_a[i].addEventListener("mousemove", function( evt ){ var ele_tip = this.nextElementSibling; var e = evt || event ele_tip.style.left = e.pageX + "px"; ele_tip.style.top = e.pageY + 20 + "px" }) //鼠标移出时，提示框消失 ele_a[i].addEventListener("mouseout", function( evt ){ var ele_tip = this.nextElementSibling; ele_tip.style.display = "none" }) } </script> </body> </html>
以上就是用js实现的一些小案例，后续会更新一些新的小案例 ，希望能对伙伴们有帮助
同时如果伙伴们有发现什么错误，请大家指点