js实现轮播图特效
更新时间:2020年5月28日 16:54 点击:1754
本文实例为大家分享了js实现轮播图特效的具体代码,供大家参考,具体内容如下
只需要修改图片的src即可
html:
<body> <div id="rollImgBox"> <div class="photos clearfix"> <!--轮播图里面首位多放最后一张与第一张图片,以便顺畅平滑切换--> <div class="move"><img src="img/timg%20(7).jpg" alt=""></div> <div class="move"><img src="img/timg%20(4).jpg" alt=""></div> <div class="move"><img src="img/timg%20(5).jpg" alt=""></div> <div class="move"><img src="img/timg%20(6).jpg" alt=""></div> <div class="move"><img src="img/timg%20(7).jpg" alt=""></div> <div class="move"><img src="img/timg%20(4).jpg" alt=""></div> </div> <!--points圆点导航,js动态生成--> <div class="points"></div> <!--如果需要向左与向右的按键,引入方向图片--> <span class="leftPoint"> < </span> <span class="rightPoint"> > </span> </div> </body>
style:
*{ margin: 0; padding: 0; } .clearfix{ zoom: 1; } .clearfix:after{ content: ""; display: block; height: 0; visibility: hidden; clear: both; } #rollImgBox{ /*这里让盒子居中,应用到具体页面删除即可*/ margin: 20px auto; /*如果该轮播图不是独占一行,需要将其改为行内块元素*/ display: block; position: relative; /*在这里设置装载图片的框框的宽高*/ width: 947px; height: 585px; /*在这里设置边框的样式用outline,这样就不会影响到后面的js了 /*加边框,用outline即可,不会影响实际的距离*/ outline: 5px solid blue; overflow: hidden; } #rollImgBox .photos .move img{ /*在这里设置图片的宽高,与边框的宽高相同*/ width: 947px; height: 585px; } #rollImgBox .photos{ position: relative; /*移动的是图片的宽度,左移947px*/ left: -947px; } #rollImgBox:hover{ cursor: pointer; } #rollImgBox .photos div{ float: left; } #rollImgBox .points{ position: absolute; /*在这里修改圆点导航的位置*/ bottom: 30px; right: 170px;/*右下方*/ text-align: center; } #rollImgBox .points span{ display: inline-block; /*在这里可以更改圆点的大小*/ text-align: center; line-height: 66px; font-size: 24px; font-family: 微软雅黑; width: 66px; height: 66px; background: rgba(112,117,112,.6); border-radius: 50%; margin-left: 15px; } #rollImgBox .points .pointsNow{ background: rgba(62,255,49,.6); } /*左右按钮*/ #rollImgBox .leftPoint{ width: 60px; height: 60px; background: rgba(0,0,0,.5); text-align: center; line-height: 60px; position: absolute; font-size: 30px; color: white; top: 290px; left: 0; } #rollImgBox .rightPoint{ width: 60px; height: 60px; background: rgba(0,0,0,.5); text-align: center; line-height: 60px; position: absolute; font-size: 30px; color: white; top: 290px; right: 0; } #rollImgBox .leftPoint:hover{ background: rgba(255,0,0,.5); } #rollImgBox .rightPoint:hover{ background: rgba(255,0,0,.5); }
script:
window.onload = function(){ let rollImgBox = document.querySelector("#rollImgBox"); let photos = document.querySelector("#rollImgBox .photos"); let allimg = document.querySelectorAll("#rollImgBox .move img"); let index = 2; //动态设计移动图片的框框宽高 //(rollImgBox.offsetWidth)是要剪去边框的宽度 photos.style.width = (allimg.length)*(rollImgBox.offsetWidth) + "px"; photos.style.height = rollImgBox.offsetHeight + "px"; //动态创建小圆点 let point = new Array(); let points = document.querySelector("#rollImgBox .points"); for (let i=0;i<(allimg.length-2);i++){ point[i] = document.createElement("span"); point[i].innerHTML = (i+1); points.appendChild(point[i]); } point[0].className = "pointsNow"; let rollImgIterval = setInterval(function () { //图片的轮播 if (index === allimg.length){ photos.style.left = 0; index = 1; photos.style.transition = "0s"; point[0].className = "pointsNow"; } else { photos.style.transition = "1.5s"; } photos.style.left = -(rollImgBox.offsetWidth)*index + "px"; index++; //小圆点的变换 for (let j=0;j<(allimg.length-2);j++){ if (j === index-2){ point[j].className = "pointsNow"; } else { point[j].className = ""; } } //这里是最后一张图片(与展现的第一张一样的图)设置小圆点样式 if (index === allimg.length){ point[0].className = "pointsNow"; } },2000); //当用户把鼠标放到rollImgBox盒子中,需要查看图片,自动轮播停止 rollImgBox.onmouseover = function () { clearInterval(rollImgIterval); }; rollImgBox.onmouseout = function () { rollImgIterval = setInterval(function () { //图片的轮播 if (index === allimg.length){ photos.style.left = 0; index = 1; photos.style.transition = "0s"; point[0].className = "pointsNow"; } else { photos.style.transition = "1.5s"; } photos.style.left = -(rollImgBox.offsetWidth)*index + "px"; index++; //小圆点的变换 for (let j=0;j<(allimg.length-2);j++){ if (j === index-2){ point[j].className = "pointsNow"; } else { point[j].className = ""; } } //这里是最后一张图片(与展现的第一张一样的图)设置小圆点样式 if (index === allimg.length){ point[0].className = "pointsNow"; } },2000); }; //点击小圆点,跳转到对应的图片位置 for (let k=0;k<(allimg.length-2);k++){ point[k].onmousedown = function () { photos.style.left = -(rollImgBox.offsetWidth)*(k+1) + "px"; //小圆点的变换 for (let j=0;j<(allimg.length-2);j++){ if (j === k){ point[j].className = "pointsNow"; } else { point[j].className = ""; } } //点击小圆点之后更改index的值 index = k+2; } } //点击左右方向键,对图片进行滑动 let leftPoint = document.querySelector('#rollImgBox .leftPoint'); let rightPoint = document.querySelector('#rollImgBox .rightPoint'); leftPoint.onclick = function () { photos.style.transition = "1s"; //向左滑动一张图片,并修改index的值(index--) let dis = index-2; //当dis为1时,圆点到达第一个位置,如果再往左移动一个,圆点应该到达最后一个位置 if (dis < 1){ dis = allimg.length-2; photos.style.left = 0; point[dis-1].className = "pointsNow"; point[0].className = ""; index = allimg.length; } else { photos.style.left = -(rollImgBox.offsetWidth)*dis + "px"; point[dis-1].className = "pointsNow"; point[dis].className = ""; } //从第一张顺滑切换到最后一张 setTimeout(function () { if (photos.style.left === '0px'){ photos.style.left = -(rollImgBox.offsetWidth)*(allimg.length-2) + "px"; photos.style.transition = '0s'; index = allimg.length-1; } },1000); index--; }; rightPoint.onclick = function () { photos.style.transition = "1s"; //向右滑动一张图片,并修改index的值(index++) let dis = index-1; //当dis为5时,圆点到达最后一个位置,如果再往右移动一个,圆点应该到达第一个位置 if (dis >= (allimg.length-2)){ photos.style.left = -(rollImgBox.offsetWidth)*(allimg.length-1) + "px"; point[0].className = "pointsNow"; point[allimg.length-3].className = ""; index = 1; } else { photos.style.left = -(rollImgBox.offsetWidth)*index + "px"; point[dis].className = "pointsNow"; point[dis-1].className = ""; } //从最后一张顺滑切换到第一张 setTimeout(function () { if (photos.style.left === ((-(rollImgBox.offsetWidth)*(allimg.length-1))+'px')){ photos.style.left = -(rollImgBox.offsetWidth) + "px"; photos.style.transition = '0s'; index = 2; } },1000); index++; }; };
更多关于轮播图效果的专题,请点击下方链接查看学习
javascript图片轮播效果汇总
jquery图片轮播效果汇总
Bootstrap轮播特效汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞,大家继续关注更多精彩焦点轮播图。
上一篇: 小程序富文本提取图片可放大缩小
下一篇: JS写滑稽笑脸运动效果
相关文章
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式,可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash(哈希),hmac(密钥哈希),cipher...2014-06-07
- 这篇文章主要介绍了Nodejs回调加超时限制两种实现方法的相关资料,需要的朋友可以参考下...2017-06-15
- 1.什么是异步编程? 异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数、ajax请求等等。示例: for (var i = 1; i <= 3; i++) {setTimeout(functi...2015-10-23
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 这篇文章主要介绍了JS中split()用法(将字符串按指定符号分割成数组)的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下...2016-10-25
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15