如何用JS写一个轮播样式

首先我们捋一下逻辑，一个基本的淘宝轮播图，下方会有一个数字按钮控制轮播，其次是当鼠标划入图片时，左右会出现箭头来控制图片的滑动。鼠标移出过后，轮播会自动划走。根据这个逻辑我们可以开始码代码了。

一

1：首先我们在vscode上面先把基本的代码写上，然后开始用js代码操作css样式，运行一下会出现如下的原始效果。

2：轮播是的多个图片集合，在一定区域只选择显示一张图片，其余图片则被隐藏，我们要做的就是用js代码改变集合的位置显示其他的图片。如下图是隐藏的图片

3：现在开始操作js代码

3-1 首先我们需要获取图片集合的节点以及显示区域的节点

3-2然后就是在图片下方创建一个序列节点来控制图片

3-2-1 把创造的节点加入到集合中,并且选中一张

3-2-2现在则需要创建一个点击事件来控制图片(里面调用了move函数，我放在了最后)

3-2-3现在需要鼠标移入然后出现箭头控制图片，当我们点击到最后i一张图片的时候，我们再点击会使得图片回到第一张，但是直接回到第一张会变成反方向，所以我们克隆一张第一张，然后点最后一张先按顺序到克隆的那一张，然后瞬间回到第一张，这样看起来就很流畅的从最后i一张到第一张

3-2-4 点击右箭头

3-2-5 点击左箭头

函数定时器

move函数

getPos函数

最后就可以得到样式啦

我把全部代码放在下面可以看整体结构，但是图片得自己放嗷

<!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>Document</title><style type="text/css">* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 300px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 300px;overflow: hidden;position: relative;}.screen li {width: 500px;height: 300px;overflow: hidden;float: left;}.screen ul {position: absolute;left: 0px;top: 0px;width: 3000px;}.all ol {position: absolute;right: 10px;bottom: 10px;line-height: 20px;text-align: center;}.all ol li {float: left;width: 20px;height: 20px;background: #fff;border: 1px solid #ccc;margin-left: 10px;cursor: pointer;}.all ol li.current {background: yellow;}#arr {display: none;z-index: 1000;}#arr span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}</style>
</head><body><div class="all" id='box'><div class="screen" id="screen"><ul><li><img src="data:images/1.jpg" width="500" /></li><li><img src="data:images/2.jpg" width="500" /></li><li><img src="data:images/3.jpg" width="500" /></li><li><img src="data:images/1.jpg" width="500" /></li><li><img src="data:images/2.jpg" width="500" /></li></ul><ol></ol></div><div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div></div><script>// 1 获取节点let scObj = document.querySelector('#screen');let ulObj = document.querySelector('ul');let liObj = ulObj.children;// 左右箭头获取let arrObj = document.querySelector('#arr');let leftObj = document.querySelector('#left');let rightObj = document.querySelector('#right');// console.log(liObj);let imgW = liObj[0].offsetWidth;// console.log(imgW);let olObj = document.querySelector('ol');let index = 0;let timess = '';for (let i = 0; i < liObj.length; i++) {let newLiObj = document.createElement('li');// console.log(newLiObj);newLiObj.innerHTML = i + 1;olObj.appendChild(newLiObj);//  设置第一个下标选中i == 0 && newLiObj.classList.add('current');// 创建一个点击事件newLiObj.onclick = clickFn;}// 获取ol所有的子节点let olLisObj = olObj.children;function sel() {// 1 当前选中的取消document.querySelector('.current').classList.remove('current');// 2 选中刚刚点击的olLisObj[index].classList.add('current');// console.log(olLisObj[index]);}// 2：序列号回调函数function clickFn() {// this指向点击的图篇// console.log(this);// 2-1 获取当前图片的序列号index = this.innerHTML - 1;// 2-2计算li的left值 调用move函数进行移动let tmpVal = imgW * index;move(ulObj, {left: -tmpVal})sel();}// 3  设置移入箭头显示效果scObj.parentNode.onmouseover = function () {arrObj.style.display = 'block';// 清除定时器clearInterval(timess)}scObj.parentNode.onmouseout = function () {arrObj.style.display = 'none';auto(); //自动播放,函数在后面}// 克隆第一张图片,放到最后面let cloneImg = liObj[0].cloneNode(true)// console.log(cloneImg);cloneImg.style.borderTop = '1px solid red';// 追加到ul最后ulObj.appendChild(cloneImg)/******右箭头,下一张****/rightObj.onclick = function () {// 1-1 判断index值是否为最大索引let target = '';let status = false;// index ,克隆的不能算if (index == olLisObj.length - 1) {index++; // 让克隆的一张显示出来target = imgW * index;index = 0; // 计算目标之后,归零status = true; //  将ul的left设置为0的,状态值// console.log(index, status);} else {// 1 index值增加index++;target = imgW * index;}// 2 计算left值move(ulObj, {left: -target}, function () {status && (ulObj.style.left = '0px');})// 选中序列号sel();}/******上一张 left*****/leftObj.onclick = function () {index--;if (index == -1) {// 设置克隆的第一张显示出来ulObj.style.left = -olLisObj.length * imgW + 'px';// 给index最大索引值index = olLisObj.length - 1;}let target = imgW * index;move(ulObj, {left: -target}, function () {status && (ulObj.style.left = '0px');});sel();}/*****定时器,自动轮播******/function auto() {timess = setInterval(() => {rightObj.onclick();}, 3000)}auto();var times = '';function move(ele, target, cb) {clearInterval(times);times = setInterval(function () {var onOff = true;// 遍历运动的方向和目标for (let attr in target) {// attr 表示运动的属性// 获取元素属性的实时值let tmpVal = parseInt(getPos(ele, attr))// console.log(getPos(ele, attr));// 计算speed-// console.log(tmpVal, attr);let speed = (target[attr] - tmpVal) / 10;// 取整speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);// 停止计时器,当一个属性运动到位置,设置开关状态if (tmpVal == target[attr]) onOff = true;// 让元素动起来ele.style[attr] = tmpVal + speed + 'px';}// 判断开关状态,清除定时器for (var moveAttr in target) {// 如果不相等,就说明有属性没有运动到位置,定时器不能停止if (target[moveAttr] !== parseInt(getPos(ele, moveAttr))) {onOff = false;break;}}if (onOff) {clearInterval(times);cb && cb();}// console.log(1111);}, 30)}// 获取元素的实时位置的函数function getPos(obj, attr) {if (obj.currentStyle) { // 获取css的样式return obj.currentStyle[attr];} else {return getComputedStyle(obj)[attr]}}</script>
</body></html>

如何用JS写一个轮播样式相关推荐

vue 实现无限轮播_用vue写一个轮播图效果
轮播图在网站中几乎无处不在,占用地方少,交互性好.今天就来聊聊如何用vue实现一个轮播效果. 一.原理在轮播图数组dataList中,定义一个变量currentIndex = 0表示第一张图片,默认 ...
html轮播图原理,30_用js实现一个轮播图效果，简单说下原理
一.原理将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...
用js写的轮播图，八位女明星，你翻谁的牌，程序员就是可以为所欲为！
今天下午利用摸鱼的时间做了一个图片轮播,嘿嘿,先看看效果,本来想搞动态图的,整出来效果不好,图片又超过了5M不让传,还是截图吧感觉需实现的功能: 1.定时向右滚动. 2.点击明星切换到最中间. 3 ...
教你前端如何用js写一个跑酷小游戏
在线体验地址:http://summer.pkec.net/ 源码地址:https://gitee.com/ihope_top/juejin-summer 前言不知不觉夏天又到了,提到夏天你们能想到 ...
用Android studio写一个轮播图代码
好的,下面是一个使用Android Studio编写轮播图的示例代码: 首先,在你的布局文件中添加一个ViewPager和一个指示器(例如使用ViewPagerIndicator库),用于显示轮播图和 ...
制作轮播图思路 ~ 使用JS做一个轮播图，先在脑海里捋一捋逻辑，我的思路是这样的，看图啦：
制作一个功能比较全的轮播图,应该怎么下手呢?我的思路比较中规中矩,如果不知道怎么下手的,看看我的思路吧,看完一定要着手试试哦~
vue写一个轮播图实例（没有自动轮播）
要点: 1.<li v-for="(item,index) in arr" v-on:click="lick(item)"><!-- 第{{i ...
原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

如何用JS写一个轮播样式

如何用JS写一个轮播样式相关推荐

最新文章

热门文章