跟着下面的图片写下代码 下面的代码给了解题的思路
方案一
/* * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-03 07:57:50 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-03 20:18:31 * @FilePath: \com.Html\JavaScript\Day_11_3\js\index.js * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ function FistOne() { confirm("开始案例执行函数主要目的是查看自己的js文件和Html文件是否连接成功") } FistOne() /** * @AutomaticExecutionFunction 自动执行函数 */ function AutomaticExecutionFunction() { /** * @ulel 获取在html页面中的ul元素 * @liels 获取第二个div中的类名为.item元素 * @UlImgeList 获取图片中的元素信息 * @activeEl 获取文字中的高亮元素 * @current 定义一个变量来完成图片的自动和手动 */ function GainElement() { // !手动轮番图 var ulel = document.querySelector("ul") //! 获取元素的信息 var liels = ulel.querySelectorAll(".item") // !获取元素的图片 var UlImgeList = document.querySelector("img") //! 获取高亮元素 var activeEl = ulel.querySelector(".active") //! 定义一个变量来完成图片自动轮换的效果 var current = 0; function GainElementOnmoseenter() { for (var i = 0; i < liels.length; i++) { //*拿到了用户需要 var liels = ulel.querySelectorAll(".item") 所有信息 console.log(liels) //*拿到了用户需要 liels中集合中的单个元素信息 console.log(liels[i]) //*这一步可以省略 var liel = liels[i] console.log(liel) liels[i].index = i //!获取元素的下标元素信息 console.log(i) //!当我的鼠标移入是执行用户的移入事件 liels[i].onmouseenter = function () { if (activeEl) activeEl.classList.remove("active") //! 获取我的鼠标当前移入的元素信息 console.log(activeEl) //! console.log(activeEl.classList) this.classList.add("active") //!当前我获取的元素 信息 console.log(this) activeEl = this //! 利用模板字符串对图片的切换 UlImgeList.src = `../img/${this.index + 1}.jpeg` } } } GainElementOnmoseenter() function GainVoluntarily() { //* 功能二自动播放效果 var mainel = document.querySelector(".main") //!获取了最大的元素盒子 console.log(mainel) //!使用的是定时器的内容 setInterval(function () { //! 获取我的鼠标当前移入的元素信息 console.log(activeEl) //! 获取的是当前的集合元素 console.log(activeEl.classList) if (activeEl) activeEl.classList.remove("active") liels[current].classList.add("active") //! 获取我的鼠标当前自动播放的元素信息 console.log(liels[current]) activeEl = liels[current] //! 利用模板字符串对图片的切换 UlImgeList.src = `../img/${current + 1}.jpeg` current++ if (current === liels.length) current = 0 //! 类名的长度 console.log(liels.length) }, 2000) } GainVoluntarily() } GainElement() } //!调用函数 AutomaticExecutionFunction()
代码升级 里面有相对应的解释 完成定时功能 自动播放 和手动播放
/* * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-03 19:12:11 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-04 15:45:59 * @FilePath: \com.Html\JavaScript\Day_11_3\js\index4.js * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ //!升级版代码 //!第一步获取元素 /** * @ulel 获取在html页面中的ul元素 * @liels 获取第二个div中的类名为.item元素 * @UlImgeList 获取图片中的元素信息 * @activeEl 获取文字中的高亮元素 * @current 定义一个变量来完成图片的自动和手动 */ var ulel = document.querySelector("ul") var liels = ulel.querySelectorAll(".item") var UlImgeList = document.querySelector("img") var activeEl = ulel.querySelector(".active") var current = 0; for (var i = 0; i < liels.length; i++) { //!拿到了用户需要 var liels = ulel.querySelectorAll(".item") 所有信息 console.log(liels) //!拿到了用户需要 liels中集合中的单个元素信息 console.log(liels[i]) //!这一步可以省略 var liel = liels[i] console.log(liel) var liel = liels[i] liel.index = i liel.onmouseenter = function () { current = this.index all() } } // 自动实现的原理 // 获取元素为main var mainEl = document.querySelector(".img") var time; // console.log(a) allone(this) // 函数的移入时将定时器停了去 mainEl.onmouseenter = function () { clearInterval(time) } //当鼠标移出时调用定时器 mainEl.onmouseleave = function () { allone() } // 函数封装 function allone() { time = setInterval(function () { all() current++ if (current === liels.length) current = 0 }, 1000) } //函数封装 function all() { // 获取我的鼠标当前移入的元素信息 console.log(activeEl) // 获取的是当前的集合元素 console.log(activeEl.classList) if (activeEl) activeEl.classList.remove("active") liels[current].classList.add("active") // 获取我的鼠标当前自动播放的元素信息 console.log(liels[current]) activeEl = liels[current] // 利用模板字符串对图片的切换 UlImgeList.src = `../img/${current + 1}.jpeg` }/* * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-03 19:12:11 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-04 15:45:59 * @FilePath: \com.Html\JavaScript\Day_11_3\js\index4.js * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ //!升级版代码 //!第一步获取元素 /** * @ulel 获取在html页面中的ul元素 * @liels 获取第二个div中的类名为.item元素 * @UlImgeList 获取图片中的元素信息 * @activeEl 获取文字中的高亮元素 * @current 定义一个变量来完成图片的自动和手动 */ var ulel = document.querySelector("ul") var liels = ulel.querySelectorAll(".item") var UlImgeList = document.querySelector("img") var activeEl = ulel.querySelector(".active") var current = 0; for (var i = 0; i < liels.length; i++) { //!拿到了用户需要 var liels = ulel.querySelectorAll(".item") 所有信息 console.log(liels) //!拿到了用户需要 liels中集合中的单个元素信息 console.log(liels[i]) //!这一步可以省略 var liel = liels[i] console.log(liel) var liel = liels[i] liel.index = i liel.onmouseenter = function () { current = this.index all() } } // 自动实现的原理 // 获取元素为main var mainEl = document.querySelector(".img") var time; // console.log(a) allone(this) // 函数的移入时将定时器停了去 mainEl.onmouseenter = function () { clearInterval(time) } //当鼠标移出时调用定时器 mainEl.onmouseleave = function () { allone() } // 函数封装 function allone() { time = setInterval(function () { all() current++ if (current === liels.length) current = 0 }, 1000) } //函数封装 function all() { // 获取我的鼠标当前移入的元素信息 console.log(activeEl) // 获取的是当前的集合元素 console.log(activeEl.classList) if (activeEl) activeEl.classList.remove("active") liels[current].classList.add("active") // 获取我的鼠标当前自动播放的元素信息 console.log(liels[current]) activeEl = liels[current] // 利用模板字符串对图片的切换 UlImgeList.src = `../img/${current + 1}.jpeg` }
方案二
<!DOCTYPE html> <html> <head> <style> /* 定义样式 */ body { margin: 5% 30%; } .bannerimage { width: 700px; height: 400px; float: left; background-size: 100% 100%; color: #fff; box-shadow: 0 0 12px 2px #142732; } .box { width: 700px; height: 400px; margin: 0px auto; overflow: hidden; } /* box的宽度为img的个数乘以bannerimage的宽度*/ .img-g { width: 4900px; height: 400px; position: relative; } /* img设置的样式700 */ .img-g img { float: left; width: 700px; height: 400px; } .button-g { position: relative; top: -35px; text-align: center; } .button-g span { display: inline-block; position: relative; z-index: 10; width: 10px; height: 10px; margin: 0 5px; border-radius: 100%; cursor: pointer; } </style> <script src="./js/jquery-3.6.js"></script> </head> <body> <div class="bannerimage"> <div class='box'> <div class='img-g' style='left:0px;transition:left 3s;'> <img src="./img/1.jpeg" alt=""> <img src="./img/2.jpeg" alt=""> <img src="./img/3.jpeg" alt=""> <img src="./img/4.jpeg" alt=""> <img src="./img/5.jpeg" alt=""> <img src="./img/1.jpeg" alt=""> </div> <div class='button-g'> <span data-index='0' style="background-color: #ff0000"></span> <span data-index='1' style="background-color: rgb(255, 8, 8)"></span> <span data-index='2' style="background-color: rgb(255, 0, 0)"></span> <span data-index='3' style="background-color: rgb(255, 2, 2)"></span> <span data-index='4' style="background-color: rgb(255, 0, 0)"></span> <span data-index='5' style="background-color: rgb(255, 0, 0)"></span> </div> </div> </div> <script type="text/javascript"> $(function () { // 实现自动播放 // 获取元素的Claa选择器的类名为img-g var p = document.getElementsByClassName('img-g')[0]; // 获取按钮的中的divClaa的类名为.button-g的Span元素 var button = document.querySelectorAll('.button-g span') // 设置定时器4秒中的图片自动播放 window.timer = setInterval(move, 4000); // 轮播设置 function move() { // bannerimage的宽度乘以图片的个数 if (parseInt(p.style.left) > -4200) { // 和bannerimage的宽度保持一致即可：700 设置style的样式 p.style.left = parseInt(p.style.left) - 700 + 'px' p.style.transition = 'left 1s'; tog(-Math.round(parseInt(p.style.left) / 700)) if (parseInt(p.style.left) <= -4200) { setTimeout(function () { tog(0) p.style.left = '0px' p.style.transition = 'left 0s'; }, 1000) } } else { p.style.left = '0px' p.style.transition = 'left 0s'; } } // 设置小圆点 for (var i = 0; i < button.length; i++) { // 鼠标单机时 button[i].onclick = function () { p.style.left = -700 * this.getAttribute('data-index') + 'px' tog(this.getAttribute('data-index')) clearInterval(window.timer) window.timer = setInterval(move, 3000); } } // 设置小圆点 function tog(index) { if (index > 5) { tog(0); return; } for (var i = 0; i < button.length; i++) { button[i].style.backgroundColor = 'rgba(255, 255, 255, 0.5)'; } button[index].style.backgroundColor = 'rgb(255, 255, 255)'; } // 鼠标移上事件 p.onmouseover = function () { clearInterval(window.timer) } // 鼠标移除事件 p.onmouseout = function () { window.timer = setInterval(move, 3000); } }); </script> </body> </html>
方案三
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮番图</title> <script src="./js/animate.js"></script> <script src="./js/index.js"></script> <style> * { padding: 0; margin: 0; box-sizing: border-box; } li { list-style: none; } img { border: 0; vertical-align: middle; background-size: 40%; } a { text-decoration: none; color: #666; } .focus { position: relative; margin: 100px auto; width: 500px; height: 400px; overflow: hidden; /* //记得把多出来的图片隐藏哦 */ } .focus ul { position: absolute; top: 0; left: 0; width: 500%; /* //给ul足够的宽度,给li浮动,小li才能显示在同一行 */ } .focus ul li { float: left; transform: translateZ(0); } .focus ul li img { width: 500px; height: 400px; } .focus ol { position: absolute; width: 145px; height: 13px; bottom: 12px; left: 45%; margin-left: -35px; } ol li { float: left; width: 20px; height: 5px; margin: 3px; background-color: #666565; padding-right: 5px; } ol .current { background-color: #fff; } .nav .selected { background-color: #f50; } .prev, .next { /* 绝对定位 */ position: absolute; width: 20px; height: 40px; background-color: rgba(0, 0, 0, .3); top: 50%; margin-top: -15px; color: #fff; text-align: center; line-height: 40px; font-size: 14px; /* display: none; */ z-index: 2; } .prev { left: 0; } .next { right: 0; } .prev, .next { position: absolute; } </style> </head> <!-- git --> <!-- workspack --> <body> <div class="focus"> <a href="javascript:;" class="prev">< </a> <a href="javascript:;" class="next">> </a> <ul> <li> <img src="./img/1.jpeg" alt=""> </li> <li> <img src="./img/2.jpeg" alt=""> </li> <li> <img src="./img/3.jpeg" alt=""> </li> <li> <img src="./img/4.jpeg" alt=""> </li> </ul> <ol class="circle"> </ol> </body> </html>
/* * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-01 09:42:18 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-04 09:41:51 * @FilePath: \com.Html\JavaScript\Day_11_01\js\animate.js * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ // 封装函数 function animate(obj, target, callback) { // console.log(callback); callback = function() {} 调用的时候 callback() // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 // 把我们步长值改为整数 不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); // 回调函数写到定时器结束里面 // if (callback) { // callback(); // } callback && callback(); } // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 13); }
window.addEventListener('load', function () { // 1.获取元素 // 获取左右按钮 var prev = this.document.querySelector('.prev') var next = this.document.querySelector('.next') // 获取轮番图 var focus = this.document.querySelector('.focus') var focusWidth = focus.offsetWidth // 鼠标经过轮番图显示左右按钮 focus.addEventListener('mouseenter', function () { prev.style.display = 'block' next.style.display = 'block' clearInterval(timer) timer = null //清除定时器变量 }) // 离开 focus.addEventListener('mouseleave', function () { prev.style.display = 'none' next.style.display = 'none' timer = setInterval(function () { // 手动点击事件 next.click() }, 2000) }) // 动态小圆圈 var ul = focus.querySelector('ul') var ol = focus.querySelector('.circle') for (var i = 0; i < ul.children.length; i++) { // 创建一个li 节点 var li = document.createElement('li') // 记录小圆圈的索引号 li.setAttribute('index', i) // 把li插入ol里面 节点 ol.appendChild(li) // 排他思想 点击小圆圈 添加类 其余移除 li.addEventListener('click', function () { // 把所有的小li 清除类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = '' } // 当前小li 设置类名 this.className = 'current' // 点击小圆圈移动图片 ul移动 // 点击某个小li就拿到那个小li的索引号 var index = this.getAttribute('index') // 点击某个小li 就拿到当前li的索引号给circle num num = circle = index console.log(focusWidth) console.log(index) animate(ul, -index * focusWidth) }) } // 把ol里面的类名设为current ol.children[0].className = 'current' // 克隆第一张图片li 放到ul后面 var first = ul.children[0].cloneNode(true) ul.appendChild(first) // 点击右侧按钮图片滑动一张 var num = 0 var circle = 0 next.addEventListener('click', function () { // 无缝滑动 // 如果走到了最后复制一张图片 ul快速复原left为0 if (num == ul.children.length - 1) { ul.style.left = 0 num = 0 } num++ animate(ul, -num * focusWidth) // 点击右侧按钮 小圆圈一起变换 circle++ // if (circle == ol.children.length) { circle = 0 } circleChange() }) // 左侧按钮 prev.addEventListener('click', function () { // 无缝滑动 // 如果走到了最后复制一张图片 ul快速复原left为0 if (num == 0) { num = ul.children.length - 1 ul.style.left = -num * focusWidth + 'px' } num-- animate(ul, -num * focusWidth) // 点击右侧按钮 小圆圈一起变换 circle-- // 先清除其余小圆圈的类名 // if (circle < 0) { // circle = ol.children.length - 1 // } circle = circle < 0 ? ol.children.length - 1 : circle // 调用函数 circleChange() }) // 封装函数 function circleChange() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = '' } ol.children[circle].className = 'current' } // 自动播放轮播图 var timer = this.setInterval(function () { // 手动点击事件 next.click() }, 2000) })
