1200字范文 > 原生JS实现 ‘Tab栏切换’ ‘手风琴’ ‘轮播图’效果

原生JS实现 ‘Tab栏切换’ ‘手风琴’ ‘轮播图’效果

时间：2020-04-30 04:28:54

1.小天使跟随鼠标效果

<!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 {margin: 0;padding: 0;height: 5000px;background-image: linear-gradient(0deg, purple, yellowgreen);}#box {position: fixed;left: 0;top: 0;}</style></head><body><img src="./images/angel.gif" alt="小天使" id="box"><script>// 获取小天使，因为他要移动var box = document.querySelector("#box");// 获取 body 因为要绑定事件var body = document.querySelector("body");body.addEventListener("mousemove", function (event) {// 获取鼠标坐标值，根据浏览器可视区域获取鼠标坐标值var x = event.clientX;var y = event.clientY;// console.log(x,y);// 把坐标值赋值给小天使 top left 样式中.box.style.left = x + "px";box.style.top = y + "px";});// 小结：//1. 查找元素//2. 事件绑定，addEventListener //3. 事件对象，获取鼠标坐标值//4. 样式固定定位//5. style 属性修改样式</script></body></html>

效果：

2.Tab栏切换

效果：

3.手风琴效果

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}/* 去掉li标签自带的样式点 */ul {list-style: none;}.wrap {width: 1000px;margin: 50px auto;}.slider {width: 1000px;height: 400px;border: 1px solid red;overflow: hidden;}.slider li {width: 200px;height: 400px;float: left;cursor: pointer;/* 过渡属性 */transition: all .4s;}</style><script>/*需求：1.动态的给所有的li，添加背景图片2.鼠标移入，让当前变宽，让其他变窄3.鼠标移入，恢复原状*/// 浏览器加载事件当浏览器资源加载完毕后自动执行。window.addEventListener("load", function () {// 查找元素所有li标签伪数组var lis = document.querySelectorAll(".slider li");// for循环遍历让所有li标签都可以作用到for (var i = 0; i < lis.length; i++) {// 给每一个li标签的绑定一个鼠标移入的事件lis[i].addEventListener("mouseover", function () {// 排他事件 1.1 排除其他for (var i = 0; i < lis.length; i++) {// 让li标签的宽度变成50像素lis[i].style.width = (1000 - 800) / 4 + "px";}// 排他事件 1.2 确立当前鼠标移入的那一个li标签变成800像素this.style.width = 800 + "px";})// 给li标签添加一个鼠标移出的事件lis[i].addEventListener("mouseout", function () {// for循环遍历 for (var i = 0; i < lis.length; i++) {// 当鼠标移出的时候让所有li标签的宽度都变成200像素lis[i].style.width = 200 + "px";}});}})</script></head><body><div class="wrap"><ul id="slider" class="slider"><li><img src="./images/mi1.jpg" alt=""></li><li><img src="./images/mi2.jpg" alt=""></li><li><img src="./images/mi3.jpg" alt=""></li><li><img src="./images/mi4.jpg" alt=""></li><li><img src="./images/mi5.jpg" alt=""></li></ul></div></body></html>

效果：

4.轮播图效果

<!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>* {padding: 0;margin: 0;}ul {list-style: none;}.slider{width: 730px;height: 454px;padding: 8px;border: 1px solid green;margin: 100px auto;}.inner{position: relative;overflow: hidden;height: 454px;}.imglist{width: 700%;position: absolute;left: 0;transition: all .4s;}.imglist img{width: 730px;}li {float: left;}.list {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);}.list i{width: 20px;height: 20px;border-radius: 50%;background-color: #fff;color: #333;float: left;font-style: normal;line-height: 20px;font-size: 14px;text-align: center;margin-right: 10px;cursor: pointer;}.list i:last-child{margin-right: 0;}.list i.current{background-color: lightcoral;color: #fff;}.arrow {position: absolute;width: 100%;top: 50%;margin-top: -30px;}.arrow-left,.arrow-right{width: 30px;height: 60px;position: absolute;font: 20px/60px "consolas";color: #fff;background-color: rgba(0,0,0, .3);text-align: center;cursor: pointer;}.arrow-right{right: 0;}</style></head><body><div class="slider" id="slider"><div class="inner" id="inner"><ul class="imglist" id="imglist"><li><a href="#"><img src="images/1.jpg" alt=""></a></li><li><a href="#"><img src="images/2.jpg" alt=""></a></li><li><a href="#"><img src="images/3.jpg" alt=""></a></li></ul><div class="list"><i class="current">1</i><i>2</i><i>3</i></div><dv class="arrow"><span class="arrow-left"><</span><span class="arrow-right">></span></dv></div></div><script>/* 需求：1 点击序号能切换序号能切换图片2 点击左箭头能切换序号能切换图片3 点击右箭头能切换序号能切换图片4 自动播放功能能切换序号能切换图片5 鼠标移入停止播放功能6 鼠标移出还原自动播放功能*/// 1 查找元素// 查找全部小圆点var dots = document.querySelectorAll('.list i');var arrowLeft = document.querySelector(".arrow-left");var arrowRight = document.querySelector(".arrow-right");var slider = document.querySelector(".slider");var imgList = document.querySelector(".imgList");var inner = document.querySelector(".inner");var styleObj = window.getComputedStyle(inner);var imgWidth = parseInt(styleObj.width);console.log(imgWidth);var index = 0;//点击序号切换序号和图片for(var i=0; i<dots.length; i++){// 把当前循环的i直接设置到元素的data-index自定义属性上dots[i].dataset.index = i;dots[i].addEventListener("click", function(){// 1.1能切换序号 - 排他思想// 排除所有for(var i=0; i<dots.length; i++){dots[i].classList.remove('current');}// 确立当前this.classList.add('current');// 切换图片// 获取当前点击小圆点的自定义索引值var index = this.dataset.index;// 计算ul要移动数据，赋值给leftimglist.style.left = -1 * imgWidth * index + "px";console.log(imglist.style.left);});}/* 点击左箭头切换序号和图片*/arrowLeft.addEventListener('click', function(){// 注意索引值的边界，如果索引值为0，点击的时候变成最后圆点的索引值if(index===0){index = dots.length -1;}else {// 其他情况下索引值减少index--;}console.log(index);// 1.1 能切换序号for(var i=0; i<dots.length; i++){dots[i].classList.remove('current');}// 根据索引值，给第几个小圆点添加样式dots[index].classList.add('current');// 1.2 能切换图片imglist.style.left = -1 * imgWidth * index + 'px';});function rightMove(){// index边界判断if(index === dots.length -1){index = 0;}else{index++;}// 小圆点处理for(var i=0; i<dots.length; i++){dots[i].classList.remove('current');}dots[index].classList.add('current');// 换图片imglist.style.left = -1 * imgWidth * index + "px";}arrowRight.addEventListener('click', rightMove);// 自动播放的功能var timer = setInterval(rightMove, 2000);// 鼠标移入分区，清除定时器slider.addEventListener("mouseover", function(){clearInterval(timer);});// 鼠标移出分区，继续启动定时器slider.addEventListener('mouseout', function(){timer = setInterval(rightMove, 2000);})</script></body></html>

效果：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。