最新原生js轮播图案列

最新原生js轮播图案列，很简单几个步骤

1.导入html结构，结构大家都会写哦，我就展示一下，图片有些尺寸没有对上，变形很正常的，可以给几个不同颜色的盒子用来实验都可以的。

html代码

 <div class="box"><div class="heid">   <a href="javascript:;" class="left"> &lt; </a><a href="javascript:;" class="rigth">&gt;</a><ul class="ul_wiht">  // 用来移动的ul<li><a href="javascript:;"><img src="./lunbotu.img/10.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./lunbotu.img/11.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./lunbotu.img/12.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./lunbotu.img/13.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./lunbotu.img/16.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./lunbotu.img/10.jpg" alt=""></a></li></ul><ol class="yuanq"><li class="baise"></li><li></li><li></li><li></li><li></li></ol></div></div>

2.css样式写的有点多，可以自己写的简单点,我写了这么多的css样式，看的有点头晕，ctrl+c ctrl+v 一把唆，哈哈哈

 <style>* {margin: 0;padding: 0;}li {list-style: none;}a {text-decoration: none;}.box {width: 700px;height: 300px;background-color: pink;margin: 100px auto;}.heid {position: relative;width: 700px;height: 300px;overflow: hidden;}.heid .ul_wiht {position: absolute;left: 0;top: 0px;width: 4220px;}.heid .ul_wiht li {float: left;width: 700px;height: 300px;}.heid li img {display: block;width: 100%;height: 100%;}.heid>a {display: none;position: absolute;width: 30px;height: 50px;background-color: #fff;text-align: center;line-height: 50px;font-size: 20px;opacity: .5;z-index: 99;color: #000;}.heid .left {top: 50%;left: 0;margin-top: -10px;}.heid .rigth {right: 0;top: 50%;margin-top: -10px;}.heid .yuanq {position: absolute;left: 50%;bottom: 10px;margin-left: -70px;}.heid .yuanq li {float: left;width: 15px;height: 15px;background-color: skyblue;margin-right: 5px;border-radius: 50%;cursor: pointer;opacity: .6;}.yuanq li.baise {background-color: #fff;opacity: 1;}.hezi {width: 100px;height: 100px;background-color: #000;}

3.开始写上 js代码了
应该先写一个匀速的动画函数封装，然后调用就很好用了

 // 封装一个匀速动画function anmiate(obj, distance, cllibarck) {clearInterval(obj.timea)   // 进去先清除定时器// 给事件的对象创建计时器obj.timea = setInterval(function () {let current = obj.offsetLeft  // 声明一个变量，把传进来的对象元素的宽度赋值给变量let juli = distance - current  // 算出一个总距离（distance） - 对象宽度let yunshu = juli / 10  //  除以10就是每次要走多少距离yunshu = yunshu > 0 ? Math.ceil(yunshu) : Math.floor(yunshu)  // 向上或者向下取整current += yunshu  // 每次++走多少距离份数obj.style.left = current + 'px'   // 赋值（记得要加单位哦）// 判断走完路程没有if (current == distance) {   clearInterval(obj.timea)// 判断第三个是不是函数，以免封装的动画函数传进去不对会报错if (cllibarck instanceof Function) {cllibarck()}}}, 30)}

3.1.第一步骤：先给左右按钮设置鼠标移入moueseover && 移开mouseout 的事件
3.2.第二步骤：移入后让两个按钮显示出来 display = block 移除就是 display = none
3.3.第三步骤：点击哪个小圆圈就让哪个小圆圈有高亮效果，就要用到排他for循环来做了
3.4.第四步骤：排他思想完之后用动画函数进行调用
3.5.第五步骤：先声明一个index用于存放点击次数，给点击右边的按钮做动画事件，如果点击到了最后一张，把index设置为0，ul移动的盒子left也要设置回到原来的位置是 0 ，调用动画函数
3.6.第六步骤：点击按钮右效果了开始设置小圆圈高亮效果，循环for排空，判断点击 ==最后一张的话就把索引号0设置添加高亮类名，否则小圆圈跟着index点击走
3.7.做完右边点击效果后有个小bug，连续点击就会一直变快，需要设置一个节流阀哦，允许一个函数在规定的时间内只执行一次，动画结束才可以打开。左边按钮也是一样的操作哦，
3.8：第七步骤：应该给向右做自动滚动效果，先把右按钮的里面的参数封装，点击右按钮的时候就调用这个函数，然后设置计时器
3.9：第八步骤：别忘了给鼠标移入那里清除计时器，移除就开启计时器哦

js代码，写的有点多，有更好的代码。大佬们可以推荐哈

// 轮播图开始let heid = document.querySelector('.heid')let al = document.querySelector('.left')let ar = document.querySelector('.rigth')let blockxs = document.querySelector('.blockxs')let list = document.querySelectorAll('.yuanq li')let ullist = document.querySelectorAll('.ul_wiht>li')let ul = document.querySelector('.ul_wiht')heid.onmouseover = function () {al.style.display = 'block'ar.style.display = 'block'clearInterval(timel)}heid.onmouseout = function () {al.style.display = 'none'ar.style.display = 'none'timel = setInterval(automatic, 1000)}// 点击小圆圈for (let i = 0; i < list.length; i++) {list[i].onclick = function () {for (let j = 0; j < list.length; j++) {list[j].className = ''}this.className = 'baise'anmiate(ul, -i * heid.offsetWidth)// index = i}}let index = 0 // 定义一个li的索引let fage = true // 定义一个节阀流,每点击一个只触发一次事件// 右边点击的按钮ar.addEventListener('click', function () {automatic()})function automatic() {if (fage) {fage = falseif (index == ullist.length - 1) {index = 0ul.style.left = 0}index++anmiate(ul, -index * heid.offsetWidth, function () {fage = true // 动画结束就打开})// 设置小圆圈跟随图片for (let i = 0; i < list.length; i++) {list[i].className = ''}if (index == ullist.length - 1) {list[0].className = 'baise'} else {list[index].className = 'baise'}}}let timel = setInterval(automatic, 1000) // 设置自动滚动// 左边点击的按钮al.addEventListener('click', function () {if (fage) {fage = falseif (index == 0) {index = ullist.length - 1ul.style.left = -index * heid.offsetWidth + 'px'}index--anmiate(ul, -index * heid.offsetWidth, function () {fage = true // 动画结束就打开})for (let i = 0; i < list.length; i++) {list[i].className = ''}list[index].className = 'baise'}})

看起来轮播图点几下，自动滚几下，做起来简直哈哈哈哈哈-.-，有大佬也可以分享哦，

最新原生js轮播图案列

最新原生js轮播图案列相关推荐

最新文章

热门文章