javascript实现花样轮播效果
更新时间:2021年9月7日 00:01 点击:1717
本文实例为大家分享了javascript实现花样轮播效果的两种实现方法,供大家参考,具体内容如下
第一种:简单的带按钮的轮播
介绍:左右按钮控制轮播,点击左按钮切换上一张图片,点击右按钮切换下一张
html如下:
<div class="box"> <div class="imgbox"> <a><img src="img/banner1.jpg" alt=""></a> <a><img src="img/banner2.jpg" alt=""></a> <a><img src="img/banner3.jpg" alt=""></a> <a><img src="img/banner4.jpg" alt=""></a> <a><img src="img/banner5.jpg" alt=""></a> </div> <div class="btns"> <input type="button" id="left" value="<<<"> <input type="button" id="right" value=">>>"> </div>
css如下:
.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;} .box .imgbox{} .imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;} .imgbox a:nth-child(1){left:0;} .imgbox img{width: 1000px;height: 300px;} .btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);} #left{left:0;} #right{right: 0;}}
js如下:
class Banner{ constructor(){ this.left = document.getElementById("left"); this.right = document.getElementById("right"); this.child = document.querySelectorAll(".imgbox a"); // 要进来的 this.iNow = 0; // 要走的 this.iPrev = this.child.length - 1; } init(){ var that = this; this.left.addEventListener("click",function(){ that.changeIndex(1); }) this.right.addEventListener("click",function(){ that.changeIndex(2); }) } changeIndex(direct){ if(direct == 1){ if(this.iNow == 0){ this.iNow = this.child.length-1; this.iPrev = 0; }else{ this.iNow--; this.iPrev = this.iNow + 1; } }else{ if(this.iNow == this.child.length-1){ this.iNow = 0; this.iPrev = this.child.length-1; }else{ this.iNow++; // 要走的索引永远是进来的索引-1 this.iPrev = this.iNow - 1; } } // 根据索引开始运动 this.move(direct); } move(direct){ if(direct == 1){ // iPrev走 // 从0,走到1000 this.child[this.iPrev].style.left = 0; move(this.child[this.iPrev],{left:1000}); // iNow进来 // 从-1000,进到0 this.child[this.iNow].style.left = -1000 + "px"; move(this.child[this.iNow],{left:0}); }else{ this.child[this.iPrev].style.left = 0; move(this.child[this.iPrev],{left:-1000}); this.child[this.iNow].style.left = 1000 + "px"; move(this.child[this.iNow],{left:0}); } } } var b = new Banner(); b.init();
第二种:自动轮播
介绍:两个左右按钮可以控制图片左右切换,下面带有数字的按钮,点击数字几,就可以切换到第几张,自动轮播的过程中,鼠标进入停止轮播,鼠标离开继续轮播
htm代码如下:
<div class="box"> <div class="imgbox"> <a><img src="../img/banner1.jpg" alt=""></a> <a><img src="../img/banner2.jpg" alt=""></a> <a><img src="../img/banner3.jpg" alt=""></a> <a><img src="../img/banner4.jpg" alt=""></a> <a><img src="../img/banner5.jpg" alt=""></a> </div> <div class="btns"> <input type="button" id="left" value="<<<"> <input type="button" id="right" value=">>>"> </div> <div class="list"> </div> </div>
css代码如下:
.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;} .box .imgbox{} .imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;} .imgbox a:nth-child(1){left:0;} .imgbox img{width: 1000px;height: 300px;} .btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);} #left{left:0;} #right{right: 0;} .list{width: 1000px;height: 30px;position: absolute;left: 0;bottom: 0;display: flex;background: rgba(200,200,200,0.5);} .list span{flex: 1;line-height: 30px;text-align: center;border-left:solid 1px black;border-right: solid 1px black;} .list span.active{background: red;color: #fff;}
js代码如下:
class Banner{ constructor(){ this.left = document.getElementById("left"); this.right = document.getElementById("right"); this.child = document.querySelectorAll(".imgbox a"); this.list = document.querySelector(".list"); this.box = document.querySelector(".box"); this.iNow = 0; this.iPrev = this.child.length - 1; } init(){ var that = this; this.left.addEventListener("click",function(){ that.changeIndex(1); }) this.right.addEventListener("click",function(){ that.changeIndex(-1); }) // L3.事件委托绑定事件 this.list.onclick = function(eve){ var e = eve || window.event; var tar = e.target || e.srcElement; if(tar.tagName == "SPAN"){ // L4.触发事件时,执行改变索引,同时将点前点击的span传入 that.listChangeIndex(tar); } } } changeIndex(direct){ if(direct == 1){ if(this.iNow == 0){ this.iNow = this.child.length-1; this.iPrev = 0; }else{ this.iNow--; this.iPrev = this.iNow + 1; } }else{ if(this.iNow == this.child.length-1){ this.iNow = 0; this.iPrev = this.child.length-1; }else{ this.iNow++; this.iPrev = this.iNow - 1; } } this.move(direct); } move(direct){ // 根据左右按钮传入的状态:左1,右-1 // 利用乘法 // 改变不同按钮的方向问题 this.child[this.iPrev].style.left = 0; move(this.child[this.iPrev],{left:this.child[0].offsetWidth * direct}); this.child[this.iNow].style.left = -this.child[0].offsetWidth * direct + "px"; move(this.child[this.iNow],{left:0}); this.setActive(); } createList(){ // L1.创建对应图片数量的span,同时编号 var str = ``; for(var i=0;i<this.child.length;i++){ str += `<span index='${i}'>${i+1}</span>`; } this.list.innerHTML = str; // L2.设置默认的当前项 this.setActive(); } setActive(){ for(var i=0;i<this.list.children.length;i++){ this.list.children[i].className = ""; } this.list.children[this.iNow].className = "active"; } listChangeIndex(tar){ // L5.确定要走的索引和要进来的索引 // this.iNow 要走的 // 拿到点击的span的编号 要进来的 var index = parseInt(tar.getAttribute("index")); // console.log(this.iNow, index); // L6-1.判断方向 if(index > this.iNow){ // L7-1.向左运动 this.listMove(1,index); } // L6-2.判断方向 if(index < this.iNow){ // L7-2.向右运动 this.listMove(-1,index); } // L8.将当前点击的索引设置成下次要走的索引 this.iNow = index; // L9.根据修改之后的索引,设置当前项 this.setActive(); } listMove(direct,index){ // this.iNow走 // 从哪走,走到哪 this.child[this.iNow].style.left = 0; move(this.child[this.iNow],{left:-1000 * direct}) // index进来 // 从哪进来,进到哪s this.child[index].style.left = 1000 * direct + "px"; move(this.child[index],{left:0}); } autoPlay(){ var t = setInterval(()=>{ this.changeIndex(-1); },2000) this.box.onmouseover = function(){ clearInterval(t); } var that = this; this.box.onmouseout = function(){ t = setInterval(()=>{ that.changeIndex(-1); },2000) } // console.log(that); } } var b = new Banner(); b.init(); b.createList(); b.autoPlay();
两个案例 js 里面的move是一个缓冲运动的封装,代码如下:
function move(ele,obj,cb){ clearInterval(ele.t); ele.t = setInterval(() => { // 假设状态为:可以清除计时器 var i = true; // 因为在计时器中才开始使用到对象中的信息,所以在计时器中遍历 // 并提前换来的属性和目标变量 for(var attr in obj){ if(attr == "opacity"){ var iNow = getStyle(ele,attr) * 100; }else{ var iNow = parseInt(getStyle(ele,attr)); } let speed = (obj[attr] - iNow)/10; speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed); // 只要有一个属性到目标,就停了,不对 // 必须所有属性到目标,才能停 // 只要有一个属性没到目标,绝对不能停 // 用状态来标记到底要不要停止计时器 // 只要有一个属性没到目标:绝对不能清除计时器 if(iNow !== obj[attr]){ i = false; } if(attr == "opacity"){ ele.style.opacity = (iNow + speed)/100; }else{ ele.style[attr] = iNow + speed + "px"; } } // 如果每次计时器执行结束,所有属性都执行了一遍之后,状态还是true,表示,没有被改成false,如果没有被改成false,表示没有属性没到终点,那么状态还是false就不清除 if(i){ clearInterval(ele.t); // 用户决定在动画结束时要执行的功能,万一用户没传参,做个默认判断 if(cb){ cb(); } // cb && cb(); } }, 30); } function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentStyle[attr]; }else{ return getComputedStyle(ele,false)[attr]; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
上一篇: JS实现随机生成验证码
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29